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

今天我们来聊一下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的四个参数。第一个参数表示水平阴影的位置，第二个参数表示垂直阴影的位置，第三个参数表示模糊距离，第四个参数表示阴影的大小（也就是边框的宽度），最后一个参数表示阴影的颜色。
以上就是向正方形添加边框的两种方法啦！大家可以根据自己的需要选择适合自己的方式哦。