详解CSS3的box-shadow属性制作边框阴影效果的方法

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS3,box-shadow,边框阴影等相关知识,佚名希望在学习及工作中可以帮助到您

效果演示：
2016510112816764.png (852×47)

box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
语法：
代码如下:

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow,v-shadow必须。水平，垂直阴影的位置。允许赋值。blur可选，模糊距离。spread可选，阴影的尺寸。color可选，阴影的颜色。inset可选，将外部阴影（outset）改为内部阴影。
来看几个简单的范例：

<body>
<div class="box">
<span class="caption">A</span>
</div>
<div class="box">
<span class="caption">B</span>
</div>
<div class="box">
<span class="caption">C</span>
</div>
<div class="box">
<span class="caption">D</span>
</div>
<div class="box">
<span class="caption">E</span>
</div>
<div class="box">
<span class="caption">F</span>
</div>
<div class="box">
<span class="caption">G</span>
</div>
<div class="box">
<span class=

您可能想查找下面的文章:

相关文章