css带有阴影的盒子

以下是使用CSS给盒子添加阴影的方法：

1. 使用box-shadow属性：

.box {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这个例子中，box-shadow属性接受四个值：水平偏移量、垂直偏移量、模糊半径和阴影颜色。在这个例子中，阴影会向右下方偏移2像素，模糊半径为4像素，颜色为半透明的黑色。

2. 使用text-shadow属性给文字添加阴影：

.box {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这个例子中，text-shadow属性也接受四个值，分别是水平偏移量、垂直偏移量、模糊半径和阴影颜色。在这个例子中，文字会向右下方偏移2像素，模糊半径为4像素，颜色为半透明的黑色。

3. 使用border属性和box-shadow属性结合创建带有圆角边框和阴影的盒子：

.box {
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这个例子中，border属性用于创建一个1像素宽的实线边框，border-radius属性用于设置圆角的半径，box-shadow属性用于添加阴影效果。

相关问题

css 阴影的几个属性

### CSS 阴影属性详解

#### Box Shadow (盒子阴影)

`box-shadow` 是一种用于给HTML元素添加投影效果的CSS属性。此属性允许指定多个阴影，每个阴影由一系列值定义：水平偏移、垂直偏移、模糊半径、扩展距离以及颜色[^1]。

对于更复杂的视觉效果，可以应用多层阴影。通过简单地用逗号分隔不同的阴影声明就可以实现这一点。例如：

.box {
    box-shadow: -20px 0 20px 5px rgba(213, 255, 145, 0.5),
                0px -20px 20px 5px rgba(145, 255, 191, 0.5),
                20px 0 20px 5px rgba(82, 255, 220, 0.5),
                0 20px 20px 5px rgba(239, 255, 91, 0.5);
}

上述代码创建了一个具有四个不同方向和色调渐变阴影的效果[^3]。

#### Text Shadow (文本阴影)

除了应用于整个元素外，还可以单独为文字添加阴影效果。这可以通过 `text-shadow` 属性完成，其语法类似于 `box-shadow` ，但通常只涉及较少的参数——主要是横向位移、纵向位移、模糊程度及色彩设定[^2]。

示例：

.text {
    text-shadow: 2px 2px 5px black;
}

这段样式会使得选定的文字下方出现轻微向右下角延伸并带有黑色调子的柔和阴影。

#### Drop Shadow Filter (滤镜下的投射阴影)

不同于前两者直接作用于DOM节点的方式，`drop-shadow()` 函数作为SVG过滤器的一部分被纳入到了CSS标准当中。它能够针对图像或其他图形内容施加自然istic 的遮罩式阴影处理。

实例化方式如下所示：

.image {
    filter: drop-shadow(16px 16px 10px #ccc);
}

这里指定了一个相对较大的正方形区域内的灰色阴影覆盖在图片之上。

值得注意的是，在实际开发过程中应当谨慎考虑性能因素；过度依赖这些特效可能会拖慢网页加载时间特别是移动终端上的表现效率低下等问题[^4]。