首页 话题 小组 问答 好文 用户 我的社区 域名交易 唠叨

[分享]css3怎么给正方形添加边框

发布于 2024-11-11 15:35:51
0
19

今天我们来聊一下CSS3怎么给正方形添加边框! 首先,我们要准备一个正方形。可以使用以下代码创建一个边长为100px的正方形: div { width: 100px; height: 100px; b...

今天我们来聊一下CSS3怎么给正方形添加边框!
首先,我们要准备一个正方形。可以使用以下代码创建一个边长为100px的正方形:

div {
    width: 100px;
    height: 100px;
    background-color: #f6f6f6;
} 

现在我们已经有了一个正方形,接下来就是要给它添加边框了。
第一种方法是使用border属性。我们可以这样写:
div {
    width: 100px;
    height: 100px;
    background-color: #f6f6f6;
    border: 2px solid #ccc;
} 

这个代码中,我们设置了边框的宽度为2px,样式为实线,颜色为#ccc。可以根据需要自行调整。
第二种方法是使用box-shadow属性。我们可以这样写:
div {
    width: 100px;
    height: 100px;
    background-color: #f6f6f6;
    box-shadow: 0 0 0 2px #ccc;
} 

这个代码中,我们设置了box-shadow的四个参数。第一个参数表示水平阴影的位置,第二个参数表示垂直阴影的位置,第三个参数表示模糊距离,第四个参数表示阴影的大小(也就是边框的宽度),最后一个参数表示阴影的颜色。
以上就是向正方形添加边框的两种方法啦!大家可以根据自己的需要选择适合自己的方式哦。
评论
一个月内的热帖推荐
91云脑
Lv.1普通用户

62849

帖子

14

小组

291

积分

赞助商广告
站长交流