[分享]css3宽等于高

CSS3中可以通过使用CSS变量和方块修饰符来实现宽等于高的元素。首先，我们需要定义一个CSS变量，用于存储长宽值。如下：:root { size: 100px; } 然后，我们可以使用方块修饰符，使...

CSS3中可以通过使用CSS变量和方块修饰符来实现宽等于高的元素。

首先，我们需要定义一个CSS变量，用于存储长宽值。如下：

:root {
  --size: 100px;
} 

然后，我们可以使用方块修饰符，使元素具有相同的宽高值。如下：

.square {
  width: var(--size);
  height: var(--size);
} 

最后，我们可以为元素添加一些样式，以使其看起来更好：

.square {
  background-color: #333;
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: var(--size);
} 

这样，我们就成功地创建了一个宽等于高的元素。相信这在很多设计中会用到，尤其是在制作卡片或小模块时。