当先锋百科网

首页 1 2 3 4 5 6 7

CSS中添加边框和阴影是实现页面美化的常见方式之一。本文将介绍如何使用CSS创建白色边框和灰色阴影。

/* CSS代码开始 */
.box {
width: 200px;
height: 150px;
border: 1px solid #ffffff;
box-shadow: 2px 2px 5px #a9a9a9;
}
/* CSS代码结束 */

首先,在HTML中创建一个带有class="box"的div元素,然后在CSS中输入以上代码即可实现白色边框和灰色阴影效果。具体解析如下:

1. 宽高设定

首先,我们设定div元素的宽为200px,高为150px。这个根据实际情况去调整即可。

.box {
width: 200px;
height: 150px;
}

2. 边框设定

我们希望这个div元素有白色的边框。因此,我们使用border属性来设定边框,值为1px,颜色为白色(#ffffff)。

.box {
border: 1px solid #ffffff;
}

3. 阴影设定

最后,我们为div元素添加灰色的阴影。使用box-shadow属性,设定水平偏移量为2px,垂直偏移量为2px,模糊度为5px,颜色为灰色(#a9a9a9)。

.box {
box-shadow: 2px 2px 5px #a9a9a9;
}

以上步骤完成后,我们就能看到带有白色边框和灰色阴影的div元素了。

希望这篇文章对您有所帮助,谢谢!