本文详细介绍了CSSbox-shadow属性的各个组成部分，包括偏移量、模糊、扩展、颜色和内投影，通过实例演示如何创建不同效果的阴影。
1、box-shadow概述
用来实现对元素产生阴影效果
1.1、box-shadow常用属性
box-shadow: h-shading v-shading blur spread color inset;
box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;
h-shading: 水平阴影 允许负值
v-shading: 垂直阴影 允许负值
blur: 模糊距离
spread: 阴影大小
color: 阴影颜色
inset: 内投影
1.2、创建一个基本案例，用于测试box-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#content{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
margin-top: 150px;
}
</style>
</head>
<body>
<div id="content">
</div>
</body>
</html>
1.3、产生阴影
box-shadow: 0 0 0 30px black;
产生一个30px的阴影。这个只是产生阴影，但是比较的生硬
下图：红色是div,黑色是阴影
1.4、让阴影产生模糊效果
box-shadow: 0 0 30px 30px black;
增加了30px的模糊半径，阴影更像阴影了。
1.5、让阴影产生水平偏移
box-shadow: 30px 0 30px 30px black;
水平(v-shadow)增加了30px,水平右移动，负值向左偏移。
1.6、让阴影产生垂直偏移
box-shadow: 30px 30px 30px 30px black;
水平(h-shadow)增加了30px,垂直下移，负值向上偏移。
1.7、产生内投影
box-shadow: 30px 30px 30px 30px black inset;
可以根据自己的需求调整变化，达到自己的满意的效果。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
