1.盒子阴影
在CSS3中，我们可以使用 box-shadow 属性为盒子添加阴影。
1.1 语法
box-shadow: inset h-shadow v-shadow blur-radius color; /* inset 表示阴影类型为内阴影 */ /* outset 表示阴影类型为外阴影 （不添加时默认为外阴影，但是添加后反而无效 故想表示外阴影时不添加即可）*/ /* h-shadow 表示阴影水平位移量 可以为负值*/ /* v-shadow 表示阴影垂直位移量 可以为负值*/ /* blur-radius 表示阴影模糊半径 即阴影向外模糊的模糊范围 值越大越模糊 */ /* color 表示阴影颜色，定义绘制阴影时所使用的颜色 */
1.2 应用
<style> .box { width: 300px; height: 300px; border: 3px solid red; border-radius: 10px; box-shadow: 5px 15px 10px #06c; } </style> <body> <div class="box"></div> </body>给div盒子添加上述box-shadow属性后，就可以给div盒子添加上了一个蓝色阴影，默认为外阴影（一定不能加上outside)，最后效果如下左图所示：
如果改为box-shadow：inset 5px 15px 10px #06c; 则最后效果如下右图：
1.3 注意
①默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
②盒子阴影不占用空间，不会影响其他盒子排列。
2. 文字阴影
在 CSS3 中，我们可以使用 text-shadow 属性将给文本添加阴影。
2.1 语法
text-shadow: h-shadow v-shadow blur color; /* h-shadow 必需，水平阴影的位置，允许负值 */ /* v-shadow 必需，垂直阴影的位置，允许负值 */ /* blur 可选，模糊距离 如果设置的是0，那么将和正常的文字清晰度一样 */ /* color 可选，阴影的颜色 */
2.2 应用
<style> h1 { text-shadow: 10px 20px 5px red; } </style> <body> <h1>给文本添加阴影</h1> </body>给h1添加上述text-shadow属性后，就可以给h1的文字添加上了一个红色阴影，如下图所示：
5212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
