【box-shadow属性】

是一个css3属性,用于创建阴影效果。
语法:box-shadow:offset-x offset-y blur spresd color position;
属性值说明:
offset-x offset-y指的是元素水平偏移量;
blur:表示阴影的模糊半径;
spread:阴影尺寸(从元素到阴影的距离),正值会在元素的各个方向按指定的数值延伸阴影,负值会使阴影收缩的比本身元素的

尺寸还小。
color:阴影的颜色值;
position:可选,表示阴影的位置,默认值是外部阴影,关键字inset指的是内部阴影。

多重阴影:每个阴影通过逗号分割;
圆形阴影:通过border-radius和box-shadow和用完成。
用box-shadow来创建的元素是边界环绕的,不干扰页面布局。
例子:
外部阴影

.box{
            margin:0 auto;
            width:200px;
            height:200px;
            background-color:yellow;
            box-shadow:10px 10px 10px 0px #999;
        }


 css3-(box-shadow)属性
内部阴影

.box{
            margin:0 auto;
            width:200px;
            height:200px;
            background-color:yellow;
            box-shadow:20px 10px 10px 10px #999 inset;
        }

 

 

css3-(box-shadow)属性

在这里我只举了两个简单的例子,有很多的效果,多多探索。另外相似的属性还有text-shadow。

相关文章:

  • 2021-10-03
  • 2022-03-02
  • 2022-12-23
  • 2021-11-06
  • 2021-06-22
  • 2021-05-26
猜你喜欢
  • 2021-04-11
  • 2022-12-23
  • 2022-12-23
  • 2021-09-09
  • 2021-11-01
  • 2021-07-08
相关资源
相似解决方案