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

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

本文主要包含css3动画详解,css3边框阴影,css3边框内阴影,css3下边框阴影,css3阴影等相关知识,佚名希望在学习及工作中可以帮助到您

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

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

</div>

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

</div> </div>

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

</div>

<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

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

相关文章

2017-06-02css3.0 图形构成实例练习一
2017-06-02CSS3实现千变万化的文字阴影text-shadow效果设计
2017-06-02使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2017-06-02基于CSS3实现的漂亮Menu菜单效果代码
2017-06-02CSS3 完美实现圆角效果
2017-06-02CSS3制作气泡对话框的实例教程
2017-06-02CSS3中的transform属性进行2D和3D变换的基本用法
2017-06-02利用纯CSS3实现动态的自行车特效源码
2017-06-02详解CSS3 Media Queries中媒体属性的使用
2017-06-02css3 图片圆形显示如何CSS将正方形图片显示为圆形图片布局