css视觉效果之单侧投影 box-shadow阴影效果
时间:5年前 阅读:6328
为元素设置投影可以使用 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,我们将及时处理。
微信扫码关注
更新实时通知
网友评论