文本周围的颜色 - CSS

在 CSS 中，我们可以使用 text-shadow 属性来定义文本周围的阴影。同样地，我们也可以使用 box-shadow 属性来定义文本周围的边框。

text-shadow

text-shadow 属性接受一个或多个阴影描述。每个阴影描述由四个值组成：水平偏移量、垂直偏移量、模糊半径和颜色。多个阴影描述可以用逗号分隔。

text-shadow: h-shadow v-shadow blur-radius color;

例如，要添加一个红色的文本阴影，可以这样写：

text-shadow: 2px 2px 4px red;

这将在文本周围创建一个偏移为 2 像素的红色阴影，模糊半径为 4 像素。

可以使用负值来向上或向左移动阴影，如：

text-shadow: -2px -2px 4px blue;

要添加多个阴影，可以将它们放在逗号分隔的列表中，如：

text-shadow: 2px 2px 2px red, -2px -2px 2px blue;

这将为文本创建两个阴影，一个红色的向右下方的阴影，一个蓝色的向左上方的阴影。

box-shadow

box-shadow 属性可以用于为元素创建一个带阴影的边框。它的语法类似于 text-shadow：

box-shadow: h-shadow v-shadow blur spread color;

其中 h-shadow 和 v-shadow 分别表示水平和垂直方向的偏移量，blur 表示模糊半径，spread 表示阴影的扩散半径（可以是负值），color 表示阴影的颜色。

例如，要为一个 div 元素创建一个 10 像素宽的黑色边框，可以这样写：

box-shadow: 0 0 0 10px black;

同样地，box-shadow 也可以同时定义多个阴影：

box-shadow: 
  0 0 0 10px black, 
  0 0 0 15px red, 
  0 0 0 20px blue;

这将为元素创建三个边框，分别为 10 像素黑色、15 像素红色和 20 像素蓝色。

结束语

text-shadow 和 box-shadow 可以用于为文本和元素创建有趣的效果。它们可以与其他 CSS 属性一起使用，创造出无数种可能。