css视觉效果之单侧投影 box-shadow阴影效果

为元素设置投影可以使用 box-shadow 属性，指定三个长度值（X轴偏移量、Y轴偏移、模糊半径）与一个颜色值

要想只在底部设置投影，需要用到第四个参数：投影的扩张半径，如果该值为负，就代表缩小投影尺寸

text-shadow和box-shadow属性的使用：

/*第一个是水平阴影的位置(10px就是阴影往右移10px;   -10px就是往左移)，第二个是阴影垂直位置   第三个是模糊距离  第四个是阴影的颜色*/    

text-shadow: 10px 0 10px purple;   

/*第一个第二个第三个和上面的意思相同，第四个是阴影的尺寸（实心的）      第五个是阴影的颜色也是和上面的意思相同*/    

box-shadow: 0px 0px 0px 30px red;

例子：

box-shadow: 0 2px 4px black;  //即使设置X轴偏移量为0，两侧还会有轻微的投影

box-shadow: 0 5px 5px -5px black，

　　　　　　　 0 -5px 5px -5px blue; //通过逗号分隔，单独设置各边投影

此外，还可以通过 filter：drop-shadow（）；为不规则图形添加投影

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知