[分享]css3文字阴影和盒子阴影

CSS3引入了许多新的样式特性，在文本和盒子的阴影效果中也有很大的改进。以下是关于CSS3文字阴影和盒子阴影的介绍。/ 文字阴影 / textshadow: hshadow vshadow blur ...

CSS3引入了许多新的样式特性，在文本和盒子的阴影效果中也有很大的改进。以下是关于CSS3文字阴影和盒子阴影的介绍。

/* 文字阴影 */
text-shadow: h-shadow v-shadow blur color;

/* 盒子阴影 */
box-shadow: h-shadow v-shadow blur spread color inset; 

对于文字阴影，我们可以使用text-shadow属性。它允许我们添加一个或多个单独的阴影到一个文本元素。text-shadow属性接受四个参数：水平投影距离、垂直投影距离、模糊值和颜色。例如，以下代码将添加一个红色的阴影，向右和向下偏移2像素，模糊半径为1像素。

h1 {
  text-shadow: 2px 2px 1px #ff0000;
} 

对于盒子阴影，我们可以使用box-shadow属性。它允许我们添加一个或多个单独的阴影到一个元素的边框框线之外。box-shadow属性接受五个参数：水平投影距离、垂直投影距离、模糊值、扩展值和颜色。扩展值是一个内部阴影距离边框的距离，如果值为正，则阴影在元素内部，如果值为负，则阴影在元素外面。颜色可以使用CSS的颜色值或关键字，也可以使用rgba或hsla值。例如，以下代码将添加一个2像素宽、5像素高和2像素模糊半径的浅灰色内部阴影。

div {
  box-shadow: inset 0 0 2px -1px #ccc;
} 

总而言之，CSS3文字阴影和盒子阴影可以让我们创造出更复杂、更生动的效果。需要注意的是，文字阴影和盒子阴影并不是所有浏览器都支持，所以在使用时需要谨慎考虑兼容性问题。