Aug
18
2013
css3阴影效果实例
作者：
绝缘体.. 发布：
2013-08-18 10:08 分类：
未分类 阅读：
抢沙发
利用CSS3的阴影属性可以在网页的元素上加上阴影效果，这是一种新特性。不过这种特性只在支持CSS3的浏览器上有效果，比如：Firefox3.5，Safari 3.1 +，和谷歌浏览器等。
下面就说说如何使用css3的阴影属性。
css3阴影主要用到了box-shadow属性，该属性的语法格式如下：
box-shadow: <horizontal> <vertical> <blur> <color>
以上各属性值的意思如下：
horizontal（水平）：指定水平偏移阴影。正值（即：5px）阴影向右，而为负值（即：- 10px）将使它偏向左。
vertical（垂直）：指定垂直偏移阴影。正值（即：5px）会使阴影在框的底部，而负值（即：- 10px）将使它偏向上。
blur(模糊)：设置的柔化半径。默认值为0，这意味着没有模糊。正值增加了模糊，而负值，实际上缩小了阴影。此属性默认为0。
clolor(颜色)：颜色值,也就是设置阴影颜色。
提醒：该属性可以加在任意元素上，如图片，Div，SPAN，P标签等等都可以。
下面看一个具体的阴影示例，如下是效果示例图和具体的代码：
<html xmlns="http://www.phpernote.com/">
<head>
<title>CSS3阴影效果实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="shadow">矩形的 CSS3 的阴影</div>
</body>
</html>
微信扫一扫，打赏作者吧～
css3阴影效果实例：等您坐沙发呢！
发表评论
