CSS3 Box Shadow

语法：: box-shadow:1px 2px 3px #FFF;
box-shadow:阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色；

兼容性

Firefox支持Box Shadow(阴影)：-moz-box-shadow:2px 2px 5px #333333；
webkit内核的Safari和Chrome支持Box Shadow(阴影)：-webkit-box-shadow:2px 2px 5px #333333；
Opera支持Box Shadow(阴影)：box-shadow:2px 2px 5px #333333；
IE不支持Box Shadow(阴影)；

其它

同一个元素可以使用多个阴影，box-shadow:2px 2px 5px #333333,box-shadow:-2px -8px 5px #333333;；
js中可以使用：obj.style.webkitBoxShadow=值（字符串）;obj.style.MozBoxShadow=值（字符串）;obj.style.boxShadow=值（字符串）;

演示

<div style="width:150px;height:70px;-moz-box-shadow:0px 0px 5px #333333;-webkit-box-shadow:0px 0px 5px #333333;box-shadow:0px 0px 5px #333333;
"></div>

效果：

参考文章

css3阴影属性box-shadow

CSS3 Box Shadow相关推荐

Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
CSS3 Text Shadow
css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: 语法: text-shadow:1px 2px 3px #FFF; text- ...
Box Shadow
1.box-shadow属性 box-shadow属性是一个给元素添加阴影效果的css3属性,允许给元素设置一个或多个阴影效果,IE9+.Firefox 4.Chrome.Opera 以及 Safar ...

CSS3 Box Shadow

兼容性

其它

演示

参考文章

CSS3 Box Shadow相关推荐

最新文章

热门文章