来自四面八方的 CSS 盒子阴影 - CSS

CSS 盒子阴影在 web 开发中经常被使用，可以让网页看起来更加美观。本文将介绍四面八方的盒子阴影，希望对你有所帮助。

前言

CSS 盒子模型由内容、内边距、边框和外边距组成。阴影是作用于盒子的外边距和边框上的。盒子阴影有四个方向：上、下、左和右。

示例

下面是一个示例，其中展示了来自四面八方的盒子阴影：

.box {
  padding: 20px;
  margin: 20px;
  border: 1px solid black;
  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5),
    -10px -10px 10px 10px rgba(255, 255, 255, 0.5),
    -10px 10px 10px 10px rgba(255, 0, 0, 0.5), 10px -10px 10px 10px rgba(0, 255, 0, 0.5);
}

这段代码会为 .box 类添加四个方向上的盒子阴影：

1. 向右和向下的黑色阴影，阴影大小为 10 像素，透明度为 0.5。
2. 向左和向上的白色阴影，阴影大小为 10 像素，透明度为 0.5。
3. 向左下角的红色阴影，阴影大小为 10 像素，透明度为 0.5。
4. 向右上角的绿色阴影，阴影大小为 10 像素，透明度为 0.5。

这些阴影的顺序很重要。在 box-shadow 属性中，阴影由一个或多个以逗号分隔的阴影描述组成。每个阴影描述都包括四个长度值和一个颜色值。

其中长度值的顺序分别为：水平偏移量、垂直偏移量、模糊半径和扩展半径。颜色值可以使用 RGB、RGBA 或十六进制表示。

总结

本文介绍了来自四面八方的 CSS 盒子阴影。我们可以使用 box-shadow 属性为元素添加阴影，使之看起来更加美观。需要注意阴影的顺序和每个阴影描述的格式。希望这篇文章对你理解 CSS 盒子阴影有所帮助。