如何添加边框和阴影?
HTML:
CSS:
.box {
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
解释:
-
width
和height
指定边框的宽度和高度。 -
background-color
指定填充颜色。 -
border
指定边框的宽度和颜色。 -
box-shadow
指定阴影效果,包括阴影颜色、阴影距离和阴影范围。
修改示例:
- 添加边框颜色:
.box {
/* ... */
border-color: #000;
}
- 添加边框宽度:
.box {
/* ... */
border-width: 2px;
}
- 添加边框阴影:
.box {
/* ... */
box-shadow: 0 0 10px #ccc;
}
注意:
-
box-shadow
属性需要在浏览器支持中。 - 可以使用不同的颜色和阴影效果来创建不同的边框和阴影效果。