当前位置:

box-shadow的具体使用方法

访客 2024-04-23 1306 0

先前学习的时候只知道box-shadow的前三个阴影向x轴偏移距离y轴偏移距离和阴影大小

直到今天遇到一个案例才去网上细看box-shadow的使用方法才理解真正含义

box-shadow-CSS(层叠样式表)|MDN

这里是官方给予box-shadow的详解不过自己观看很容易遗漏一些关键点

在讲解之前我们先上代码再进行逐一讲解

看代码

box-shadow:1px2px3px4pxrgba(0,0,0,0.4)inset;

在box-shadow里面

第一个参数1代表了x正轴的偏移量向右

第二个参数2代表了y正轴的偏移量向左

第三个参数3代表了模糊程度只能是正值它也是实现阴影的关键

第四个参数4代表了阴影所扩展的半径如果没有第三个参数只能达到放大边框的大小

第五个参数inset为内置阴影,默认为外置阴影

那如果要用box-shadow实现四边阴影那该如何做呢

box-shadow:0px0px3px2pxrgba(0,0,0,0.4);

没错就是给当给第三个和第四个宽度达到阴影扩散的效果从而实现四边阴影

那如果想四边一边一个色呢?

box-shadow是可以分别给四边设置各自的样式的

  • box-shadow:0px-10px0px0pxred,//上边阴影
  • -10px0px0px0pxyellow,//左边阴影
  • 0px10px0px0pxblue,//下边阴影
  • 10px0px0px0pxpink;//右边阴影
  • 达到的效果如下

    发表评论

    • 评论列表
    还没有人评论,快来抢沙发吧~