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,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:有没有上证50etf期权行情数据提供商?

下一篇:期权交易日报:后天即将行权 ETF50涨幅逾3%

网友评论

请先 登录 再评论,若不是会员请先 注册