在 div 周围放置光影 - CSS

有时候我们需要让某个元素在页面上有特别的突出效果，可以通过在其周围添加一些光影效果来实现。本文将介绍如何利用 CSS 在一个 div 周围放置光影效果。

box-shadow属性

CSS 的 box-shadow 属性可以让我们在一个元素周围添加阴影效果。其用法如下：

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

以上参数的含义分别为：

• h-shadow： 阴影向右的偏移量，可为负数。
• v-shadow： 阴影向下的偏移量，可为负数。
• blur： 模糊半径，值越大阴影越模糊。
• spread： 阴影的扩展半径。
• color： 阴影的颜色。
• inset： 可选，指定是否将阴影设置为内阴影。

例如：

div {
  box-shadow: 5px 5px 5px #888888;
}

上述代码将在 div 周围添加一个向右下方偏移 5px，半径为 5px 的阴影，颜色为 #888888。

text-shadow属性

text-shadow 属性可以让我们为文字添加阴影效果。其用法如下：

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

以上参数的含义分别为：

• h-shadow： 阴影向右的偏移量，可为负数。
• v-shadow： 阴影向下的偏移量，可为负数。
• blur： 模糊半径，值越大阴影越模糊。
• color： 阴影的颜色。

例如：

div {
  text-shadow: 2px 2px 2px #888888;
}

上述代码将为 div 中的文字添加一个向右下方偏移 2px，半径为 2px 的阴影，颜色为 #888888。

组合使用

我们还可以组合使用 box-shadow 和 text-shadow 属性来实现更加丰富的效果。例如：

div {
  color: white;
  text-shadow: 1px 1px 1px black;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

上述代码将为 div 中的文字添加一个黑色阴影，为 div 周围添加一个 5px 的半径、0.3 透明度的灰色阴影。

总结

利用 box-shadow 和 text-shadow 属性可以为元素添加阴影效果，从而实现更加丰富的页面效果。我们可以根据具体情况调整参数以得到自己想要的效果。