CSS3盒阴影实例
CSS3支持一种新的“阴影”属性,可以在网页中的元素加上阴影效果,例如图片,Div,SPAN。该功能支持Firefox3.5,Safari 3.1 +,和谷歌浏览器。IE浏览器一直支持通过其pripoertary“阴影”过滤器做出简单的阴影。而现在我们可以方便地支持CSS3浏览器上添加阴影效果。
box-shadow语法格式:
box-shadow: <horizontal> <vertical> <blur> <color>
各属性值解析:
horizontal(水平):指定水平偏移阴影。正值(即:5px)阴影向右,而为负值(即:- 10px)将使它向左。
vertical(垂直):指定垂直偏移阴影。正值(即:5px)会使阴影在框的底部,而负值(即:- 10px)将使它向左。
blur(模糊):设置的柔化半径。默认值为0,这意味着没有模糊。正值增加了模糊,而负值,实际上缩小了阴影。此属性默认为0。
clolor(颜色):颜色值,也就是设置阴影颜色。
box-shadow语法格式:
box-shadow: <horizontal> <vertical> <blur> <color>
各属性值解析:
horizontal(水平):指定水平偏移阴影。正值(即:5px)阴影向右,而为负值(即:- 10px)将使它向左。
vertical(垂直):指定垂直偏移阴影。正值(即:5px)会使阴影在框的底部,而负值(即:- 10px)将使它向左。
blur(模糊):设置的柔化半径。默认值为0,这意味着没有模糊。正值增加了模糊,而负值,实际上缩小了阴影。此属性默认为0。
clolor(颜色):颜色值,也就是设置阴影颜色。
【CSS3盒阴影实例】相关文章
1. CSS3盒阴影实例
5. CSS3系列教程:阴影
9. CSS3 HTML5实例四(使用 RGBA 实现透明效果)
10. CSS3 HTML5实例五(使用 @Font-Face 实现定制字体)
本文来源:https://www.51html5.com/a773.html
﹝CSS3盒阴影实例﹞相关内容
- 使用HTML5画布(canvas)生成阴影效果
- 在HTML5中怎样实现Canvas阴影效果
- jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
- jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
- jQuery扫雷游戏在线实例
- 实例帮助你了解HTML5滑动区域选择元素Slider element
- HTML5组件Canvas实现图像灰度化(步骤+实例效果)
- HTML5 Canvas中绘制矩形实例教程
- jQuery扫雷游戏在线实例
- 9个精美的 HTML5 博客网站实例