您的位置:首页 > Web前端 > CSS

css元素边框发光效果——box-shadow

2015-10-30 20:49 549 查看
<span style="font-family:Microsoft YaHei;font-size:12px;color:#666666;">border:#aaa 1px dashed;
box-shadow:inset 0 -5px 8px -7px rgba(81, 81,81,0.8);</span>


box-shadow参数解释:

阴影方式可选, inset内阴影,否则默认外阴影;

x-offset相对X轴的偏移量: 0;

y-offset相对Y轴的偏移量:-5px;

blur 模糊值:8px;

扩展阴影半径:spread, 可选,但是实现边框阴影不同效果就考它了;

阴影的颜色:rgba(81,81,81,0.8) 其中a是指透明度alpha

例:

边框阴影相同

<span style="font-family:Microsoft YaHei;color:#666666;">.imgDiv{
border:#aaa 1px dashed;
box-shadow:0 0 8px rgba(81, 81,81,0.8);}</span>


边框阴影不同



<span style="font-family:Microsoft YaHei;font-size:12px;color:#666666;">.imgDiv{
border:#aaa 1px dashed;
box-shadow:
0 -5px 8px -7px rgba(81, 81,81,0.8),
0 -5px 8px -7px rgba(81, 81,81,0.8),
5px 0 8px -1px  rgba(81, 81,81,0.4),
5px 0 8px -1px  rgba(81, 81,81,0.8);
}</span>




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: