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>
相关文章推荐
- CSS布局之--各种居中
- 用纯CSS实现的箭头
- 自定义dialog的布局样式
- CSS3阴影 box-shadow的使用和技巧总结
- css命名
- css3盒模型
- 安卓开发学习之014 Button应用详解(样式、背景、按钮单击、长按、双击、多击事件)
- css3 媒体查询用法
- 【原创教程】虎咽CSS
- CSS LESS框架简介
- CSS清除浮动的4种方法
- CSS定位属性之间的相互作用
- css 三角形
- 力导向图 定义连线点击事件/样式/标注文字及源代码。
- 不可思议的CSS border属性----纯CSS制作三角形
- CSS基础学习三:CSS语法
- ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-节点样式和点击事件2
- EXT.NET多表头样式问题
- NPOI导Excel样式设置
- CSS样式命名规范