CSS3 box-shadow属性实例详解
什么是box-shadow
在CSS3中，box-shadow属性是用来创建元素的阴影效果，可以给框架添加立体感。
box-shadow的语法及参数
box-shadow属性有若干个参数组成，使用英文逗号分隔。语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
参数解释：
- h-shadow（必需）：水平方向上的阴影偏移量，可以为正数或负数，如果为正数则是向右侧偏移，为负数则是向左侧偏移。
- v-shadow（必需）：垂直方向上的阴影偏移量，可以为正数或负数，如果为正数则是向底部偏移，为负数则是向顶部偏移。
- blur（可选）：模糊半径，如果值越大，阴影就越模糊，如果值为0，阴影就是清晰的。
- spread（可选）：阴影的扩展半径，可以为正数或负数，如果为正数则是扩展，为负数则是收缩，它的默认值为0。
- color（必需）：阴影的颜色，可以使用CSS中支持的颜色格式，如#xxxxxx、rgb(x,x,x)、rgba(x,x,x,x)等。
- inset（可选）：设置阴影为内阴影（inset），默认情况下是外阴影。
box-shadow的示例
以下是两个使用box-shadow的示例。
示例1：创建边框阴影
.box {
width: 200px;
height: 200px;
box-shadow: 0 0 10px 2px #888888;
}
该示例中，创建了一元素宽高均为200px的边框阴影，阴影的颜色为#888888，阴影的模糊半径为10px，阴影的扩展半径为2px。
示例2：创建内阴影
.box {
width: 200px;
height: 200px;
box-shadow: inset 0 0 10px 2px #888888;
}
该示例中，创建了一个宽高均为200px的方形元素，内阴影的模糊半径为10px，扩展半径为2px，颜色为#888888。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！