css 边框阴影

作者：﹏丶夜，深了发布日期:2026-05-20 浏览:58

/* 示例代码：为一个 div 元素添加边框和阴影效果 */

/* 1. 边框样式 */
div {
    border: 2px solid #333; /* 设置边框宽度、样式和颜色 */
}

/* 2. 阴影样式 */
div {
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径、颜色（带透明度） */
}

/* 3. 组合使用边框和阴影 */
div {
    width: 200px;
    height: 200px;
    border: 2px solid #333; /* 边框 */
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); /* 阴影 */
}

解释说明：

border 属性用于设置元素的边框，可以指定边框的宽度、样式和颜色。
box-shadow 属性用于为元素添加阴影效果。它接受多个参数，分别表示水平偏移、垂直偏移、模糊半径以及阴影的颜色（可以使用 RGB、RGBA、HSL 等格式）。
在示例中，我们为一个 div 元素同时设置了边框和阴影效果，使其在页面上呈现出立体感。

上一篇：css超过3行显示为...

下一篇：css 动画库