css3盒子阴影box-shadow 设置
来源:互联网 发布:软件开发常用工具 编辑:程序博客网 时间:2024/06/10 15:14
定义:box-shadow 属性向框添加一个或多个阴影。
支持:IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
其中:
inset阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;
h-shadow:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
v-shadow:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
blur阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
spread阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
color阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。
1、简单的外阴影设置
.text{width: 200px;height: 200px;border: 1px solid #f60;-webkit-box-shadow:0 0 10px 5px rgba(242, 99, 4, 0.9);-moz-box-shadow: 0 0 10px 5px rgba(242, 99, 4, 0.9);box-shadow: 0 0 10px 5px rgba(242, 99, 4, 0.9);}
<div class="text"></div>显示效果:模糊距离10px 阴影尺寸5px
2、简单的内阴影
.text{width: 200px;height: 200px;border: 1px solid #f60;-webkit-box-shadow:0 0 10px 8px rgba(242, 99, 4, 0.9) inset;-moz-box-shadow:0 0 10px 8px rgba(242, 99, 4, 0.9) inset;box-shadow:0 0 10px 8px rgba(242, 99, 4, 0.9) inset;}显示效果:模糊距离10px 阴影尺寸8px
3、
.text{ width: 200px;height: 200px; border: 1px solid #f60; -webkit-box-shadow: 0 10px 10px rgba(242, 99, 4, 0.9); -moz-box-shadow: 0 10px 10px rgba(242, 99, 4, 0.9); box-shadow: 0 10px 10px rgba(242, 99, 4, 0.9); }显示效果:
4、
.text{width: 200px;height: 200px;border: 1px solid #f60;-webkit-box-shadow: 0 10px 10px -6px rgba(242, 99, 4, 0.9);-moz-box-shadow: 0 10px 10px -6px rgba(242, 99, 4, 0.9);box-shadow: 0 10px 10px -6px rgba(242, 99, 4, 0.9);}显示效果:
5、
.text{width: 200px;height: 200px;border: 1px solid #f60;-webkit-box-shadow:0 10px 10px rgba(242, 99, 4, 0.9) inset,0 -10px 10px rgba(242, 99, 4, 0.9) inset;-moz-box-shadow:0 10px 10px rgba(242, 99, 4, 0.9) inset,0 -10px 10px rgba(242, 99, 4, 0.9) inset;box-shadow:0 10px 10px rgba(242, 99, 4, 0.9) inset,0 -10px 10px rgba(242, 99, 4, 0.9) inset;}显示效果:
阅读全文
0 0
- css3盒子阴影box-shadow 设置
- CSS3盒子阴影 box-shadow属性
- 盒子阴影-box-shadow
- 【CSS3】---阴影 box-shadow
- css3阴影box-shadow
- css3阴影box-shadow
- css3 box-shadow实例 盒子阴影(翘边阴影,曲线阴影)
- css3 box-shadow 盒子效果
- css3阴影属性box-shadow
- CSS3 box-shadow(阴影使用)
- CSS3 box-shadow(阴影使用)
- CSS3 box-shadow(阴影使用)
- CSS3盒阴影box-shadow
- css3 边框阴影 box-shadow
- 通过CSS3的box-shadow属性设置块阴影
- css3设置box-shadow
- 盒子阴影box-shadow和文本阴影text-shadow
- box-shadow是向盒子添加阴影
- watch命令重复执行某一个命令
- Matlab遗传算法工具包的安装
- Linux下搭建SVN服务器及自动更新项目文件到web目录(www)的方法
- MySQL事务隔离级别详解
- GeoHash
- css3盒子阴影box-shadow 设置
- python从零写一个采集器:获取网页源码
- 阿里热修复AndFix的使用和注意事项
- 电感式DC/DC 升压原理
- 用Matlab的FDAtool生成IIR滤波器参数
- 浅析单播/组播/多播/广播
- 配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler” 解决办法
- Redis(二):常用命令
- /lib64/libc.so.6删除救急