border-radius阴影

### CSS `border-radius` 和 `box-shadow` 的组合使用

为了给具有圆角 (`border-radius`) 的元素添加阴影效果，可以通过结合 `border-radius` 和 `box-shadow` 属性来实现。这不仅能够使元素呈现出更加立体的效果，还能增强页面的设计感。

#### HTML 结构

<div class="rounded-box"></div>

#### CSS 样式定义

.rounded-box {
    width: 200px;
    height: 150px;
    background-color: #aec529;
    margin: 50px auto;
    border-radius: 25px; /* 设置四个角的圆角度 */
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* 水平偏移量、垂直偏移量、模糊半径、颜色 */
}

上述代码片段展示了如何创建一个拥有圆角并带阴影效果的矩形区域[^2]。其中：

- `width` 和 `height` 定义了容器尺寸；
- `background-color` 设定了背景色；
- `margin` 控制着元素相对于父级或其他兄弟元素之间的间距；
- **重要的是** `border-radius` 参数决定了各个角落处弧度大小；而 `box-shadow` 则用来指定投影的具体参数，包括位置（水平和垂直方向上的位移）、扩散程度以及色彩等特性[^3]。

当这两个属性一起应用时，即使对象本身不是完全方形或圆形，也能获得自然流畅且视觉上吸引人的外观表现形式。