CSS3box-shadow属性的使用
来源:互联网 发布:大学生网络兼职 编辑:程序博客网 时间:2024/06/08 07:03
一、语法:
E {box-shadow: inset x-offset y-offset blur-radius spread-radius color};
E {box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色};
也可同时写多组,如box-shadow: 0 -10px #fff ,0 2px #fff,0 3px #fff;
同时和transition使用可是动画更流畅
二、取值:
1. 阴影类型:此参数可选,默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影;
2.X-offset:是指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边;
3. Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部;
4.阴影模糊半径:此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊;
5. 阴影扩展半径:此参数可选,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小
6. 阴影颜色:此参数可选,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。
三、兼容浏览器的写法:
//Firefox4.0--moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;//Safari and Google chrome10.0--webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
box-shadow和text-shadow一样可以使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开。
四、IE滤镜模拟box-shadow阴影效果
基本语法:filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值),Strength=阴影半径(数值));
注意:
1.该滤镜必须配合background属性一起使用,否则该滤镜失效;
2.滤镜里的颜色属性必须写完整,不能用缩写;
3.滤镜的阴影是计算在宽高内的;
4.在盒阴影下,box会自动加上overflow:hidden;
关于IE滤镜,具体可参考http://blog.sina.com.cn/s/blog_4c1e6a010101fvgw.html
以上博文,参考了http://blog.csdn.net/freshlover/article/details/7610269 以及 http://www.w3cplus.com/content/css3-box-shadow
五、常用阴影的实现代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>box-shadow的用法</title> <style type="text/css"> div{ width:60px; height:60px; margin:40px auto; background-color: grey; } /*右下阴影*/ .box-shadow-1{ -webkit-box-shadow: 3px 3px 3px; -moz-box-shadow: 3px 3px 3px; box-shadow: 3px 3px 3px; } /*四边同色阴影*/ .box-shadow-2{ -webkit-box-shadow:0 0 10px #0CC; -moz-box-shadow:0 0 10px #0CC; box-shadow:0 0 10px #0CC; } /*四边同色阴影扩展*/ .box-shadow-3{ -webkit-box-shadow:0 0 10px 15px #0CC; -moz-box-shadow:0 0 10px 15px #0CC; box-shadow:0 0 10px 15px #0CC; } /*四边同色内阴影*/ .box-shadow-4{ -webkit-box-shadow:inset 0 0 10px #0CC; -moz-box-shadow:inset 0 0 10px #0CC; box-shadow:inset 0 0 10px #0CC; } /*四边异色外阴影*/ .box-shadow-5{ box-shadow:-10px 0 10px red, /*左边阴影*/ 10px 0 10px yellow, /*右边阴影*/ 0 -10px 10px blue, /*顶部阴影*/ 0 10px 10px green; /*底边阴影*/ } /*叠加异色阴影*/ .box-shadow-6{ box-shadow:0 0 10px 5px black, 0 0 10px 20px red; } /*类border边框效果(只设置阴影扩展半径和阴影颜色)*/ .box-shadow-7{ box-shadow: 0 0 0 1px red; } /*兼容ie*/ .box-shadow{ filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/ background-color: #ccc; -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ box-shadow:2px 2px 5px #969696;/*opera或ie9*/ } </style></head><body><div class="box-shadow-1"></div><div class="box-shadow-2"></div><div class="box-shadow-3"></div><div class="box-shadow-4"></div><div class="box-shadow-5"></div><div class="box-shadow-6"></div><div class="box-shadow-7"></div><div class="box-shadow"></div></body></html>
具体效果见下图:
- CSS3box-shadow属性的使用
- CSS3box-shadow的使用技巧总结
- CSS3box-shadow与text-shadow
- css3box-flex属性
- css3 box-shadow 属性的使用
- css3中webkit-linear-gradient、box-shadow属性的使用
- 从零开始前端学习[16]:box-shadow阴影属性的使用
- 关于属性中包含shadow的属性
- CSS3属性box-shadow使用教程
- CSS3属性box-shadow使用教程
- CSS3属性box-shadow使用详细教程
- CSS3中box-shadow属性的使用方法
- box-shadow属性的参数设置取值
- css3的box-shadow的使用
- CSS3属性之text-shadow和box-shadow(立体效果的实现)
- CSS滤镜:Shadow属性
- CSS3 box-shadow 属性
- box-shadow属性
- 蓝牙基础知识学习
- 最全Pycharm教程(14)——Pycharm编辑器功能总篇
- ACM/ICPC 沈阳网络赛 1004 (nlogn最长上升子序列)
- bzoj 1562: [NOI2009]变换序列
- Insomnia cure
- CSS3box-shadow属性的使用
- Struts2文件上传
- linux 配置tftp和nfs
- 水王争霸
- 实体实现parcelable接口传递整个对象(购物车逻辑之前)
- 0908期 HTML 基础 第一讲
- Mycat从入门到放弃
- 一位资深程序员大牛给予Java初学者的学习路线建议
- linux环境下,集群中Hadoop版本更换