zoukankan      html  css  js  c++  java
  • box-shadow

    box-shadow前言

    box-shadow是css3的一个新属性,用来实现阴影效果,阴影分为内阴影和外阴影两个效果,可以通过逗号添加多个阴影效果。

    box-shadow参数解释

    @1、inset

      有inset 则为内阴影,没有insert则为外阴影,默认为外阴影。

    @2、offset-x 

    横向阴影的大小,正值阴影在右边,负值阴影在左边

    @3 offset-y

    纵向阴影的大小,...

    @4 blur-radius

    阴影的模糊程度,值越大,阴影越模糊

    @5 spread-radius

    阴影的扩大缩小,正值时,阴影扩大,负值时,阴影缩小,默认为0。

    @6 color

    阴影的颜色

    示例 右 、 下、模糊、阴影扩大 

     box-shadow: 4px 4px 8px 6px #000;

     效果

     外阴影是我们常用的效果,元素看起来像浮于页面的上层,对于参数颜色,我们也可以考虑透明效果,比如rgba(0,0,0,0.5);

    box-shadow: 4px 4px 8px  rgba(0,0,0,0.5);

     效果

    实现四周阴影

    box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.8);

    效果略

    未完,待续......
  • 相关阅读:
    北京Uber优步司机奖励政策(2月20日~2月21日)
    滴滴快车奖励政策,高峰奖励,翻倍奖励,按成交率,指派单数分级(2月20日~2月21日)
    成都Uber优步司机奖励政策(2月19日)
    Linux
    Linux
    Linux
    Linux
    Linux
    Linux
    Linux
  • 原文地址:https://www.cnblogs.com/zhishiyv/p/11613301.html
Copyright © 2011-2022 走看看