按CSS在周围均匀地给出阴影

如果您想让您的文本框，图像和其他HTML元素周围有一个漂亮的阴影，那么将阴影添加到元素非常简单。只需使用CSS中的box-shadow属性即可。

语法

box-shadow属性接受以下值：

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

其中：

• h-shadow：表示阴影的水平距离。可以是负值、零或正值。
• v-shadow：表示阴影的垂直距离。可以是负值、零或正值。
• blur：可选。表示阴影的模糊程度。默认为0（无模糊）。值越高，阴影就越模糊，阴影边缘也就越柔和。
• spread：可选。表示阴影的扩展距离。默认为0（没有扩展）。当设置为正值时，阴影扩展到元素周围；当设置为负值时，阴影收缩到元素内部。
• color：可选。表示阴影的颜色。
• inset：可选。将阴影变成内置阴影（嵌入到元素内，而不是周围）。如果不给定此属性，则默认为外部阴影。

应用

以下是创建具有均匀外部阴影的元素的示例：

.box {
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

上面的CSS样式应用于此HTML标记：

<div class="box">
  这里是一段文本或其他元素。
</div>

此代码将使阴影位于该框周围。要使阴影更广泛，请在第三个值（模糊程度）和第四个值（扩展距离）中使用更高的值。 若要更改阴影颜色，请更改rgba值中的颜色。

结论

在元素周围添加阴影是可视化吸引人以及给用户更好的UI体验的一种简单而有效的方法。 CSS的box-shadow属性使这种实现非常简单，并且可以轻松地添加到文本框、图像和任何其他HTML元素中。