CSS阴影

2016.02.16 11:03 Tue| 99次阅读 technology| 源码

css3 box-shadow 为DIV添加阴影

用css3 box-shadow属性 实现阴影模糊效果

box-shadow:此属性包含有6个值。

box-shadow:10px 10px 5px 10px #ccc inset;

第1个值:水平阴影的长度,此值可以为负值。
第2个值:垂直阴影的长度,此值可以为负值。
第3个值:阴影的模糊值,此值不允许为负值。
第4个值:水平阴影的外延值,此值可以为负值。
第5个值:阴影的颜色。
第6个值:此值为空,默认为外阴影,设置成inset为内阴影。
实例如下: div 的内阴影效果。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>阴影</title>
<style>
 #box-shadow{
 margin:0px auto;
 width:80%;
 height:45px;
text-align:center;
 box-shadow:10px 10px 5px 5px #abcdef inset;
}
</style>
</head>
<body>
 <div id="box-shadow">此处就是你想要看到的阴影效果</div>
</body>
</html>