css 实现空心正方形

CSS是层叠样式表的缩写，是用来控制网页上样式和布局的一种语言。使用CSS可以方便的实现网页的美化效果，比如圆角、背景色、边框等等。下面让我们来学习如何使用CSS来实现一个空心正方形。

.square {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    border-style: dashed;
    border-radius: 0;
    Box-sizing: border-Box;
}

在上面的代码中，我们使用了一个名为“square”的类来定义正方形的样式。首先，我们需要定义它的宽度和高度都是100像素，这样才能让它成为一个正方形。

然后，我们添加了一个2像素的边框，并让边框风格变成了虚线（即dashed）。接着，我们将边框的圆角半径设置为0来消除边框的圆角效果。

最后，我们设置Box-sizing为border-Box，这样可以让元素的宽度和高度包括边框和内边距，而不是仅仅是内容。这样就能够让我们的正方形完美的呈现出来。

使用上述代码实现正方形的方法非常简单，只需要在HTML代码中加入一个div元素，并添加square类即可：

<div class="square"></div>

这样就可以在网页上看到一个美观的空心正方形了。