css中空心方形怎么打出来

CSS中，空心方形是一种常见的效果，通常用于制作图标或按钮。它看起来像一个没有填充颜色的方形，只有边框线。

Box-sizing: border-Box;
width: 20px;
height: 20px;
border: 2px solid black;
border-radius: 4px;

上面的代码段实现了一个简单的空心方形。具体解释如下：

• Box-sizing: border-Box;将盒模型设置为边框盒模型，使得元素的宽度和高度包括边框而不包括内边距和内容。
• width: 20px;和height: 20px;设置元素的宽度和高度为20像素。
• border: 2px solid black;设置元素的边框为2像素宽的黑色实线。
• border-radius: 4px;设置元素的边框圆角半径为4像素。

这里的关键在于border属性的写法。它由三个部分组成，分别是边框宽度、边框样式和边框颜色。我们可以根据需要自由地调整这三个值。

如果要让空心方形的边框变成虚线，只需要将border-style属性设置为dashed即可：

border-style: dashed;
border-width: 2px;
border-color: black;

上面的代码段实现了一个虚线边框的空心方形。我们可以根据实际需求来调整边框的宽度、样式和颜色。

总的来说，制作空心方形并不难，只需要一些基本的CSS知识和一点耐心就可以做出漂亮的效果。希望这篇文章能帮助大家更好地理解CSS。