CSS text-shadow，box-shadow，border-radius属性

下面是关于“CSS text-shadow、box-shadow、border-radius属性”的完整攻略。

什么是text-shadow属性？

CSS text-shadow属性用于在文本后面添加阴影效果。支持多个值，以逗号分隔，第一个值是水平偏移量，第二个值是垂直偏移量，第三个值是可选的模糊半径，第四个值是可选的阴影扩散半径。

示例1：创建文本阴影效果

h1 {
  color: #fff;
  text-shadow: 2px 2px 4px #000;
}

这个示例将h1元素内的文本添加了一个黑色4像素模糊阴影，水平偏移量为2像素，垂直偏移量为2像素。

示例2：创建彩色文本阴影效果

h1 {
  color: #fff;
  text-shadow: 
     -1px 0 #000,
      0 1px #000,
      1px 0 #000,
      0 -1px #000;
}

这个示例将h1元素内的文本添加了一个黒色的4方向阴影效果。

什么是box-shadow属性？

CSS box-shadow属性用于向元素周围添加阴影效果。支持多个值，以逗号分隔，第一个值是水平偏移量，第二个值是垂直偏移量，第三个值是模糊半径，第四个值是阴影扩散半径，第五个可选值是颜色。

示例1：创建盒子阴影效果

.box {
  box-shadow: 2px 2px 4px #000;
}

这个示例创建了一个黑色的4像素模糊阴影，水平偏移量为2像素，垂直偏移量为2像素。

示例2：创建多重盒子阴影效果

.box {
  box-shadow: 
    0 0 5px #fff, 
    0 0 25px #fff, 
    0 0 50px #fff, 
    0 0 120px #fff;
}

这个示例创建了4个白色阴影，组合在一起形成了最终的效果。

什么是border-radius属性？

CSS border-radius属性用于为元素的角落添加圆角效果。可以单独指定一个角的圆角效果，也可以为所有角同时设定。值可以是百分比、长度或关键字（如“50%”、“10px”、“border-box”）。

示例1：创建一个圆形元素

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

这个示例将一个具有100像素宽和100像素高的元素变为了一个圆。由于使用的是50%作为半径，因此它将自动适应父元素的大小。

示例2：创建圆角矩形

.rectangle {
  width: 150px;
  height: 100px;
  border-radius: 20px;
}

这个示例将一个150像素宽和100像素高的矩形的四个角设置为圆角，半径为20像素。

总结

至此，我们对“CSS text-shadow、box-shadow、border-radius属性”的应用有了更深入的理解。通过前面的例子，我们对这些属性有了更多的了解。