css百分比高度画圆 |css淡入淡出效果

.circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
background-color: red;
}

这个示例中，大家使用了一个padding-bottom的百分比值，它的值等于元素的宽度，这样大家就可以实现一个正圆形。

现在让大家详细了解一下这些CSS属性的含义：

• width:设置元素的宽度为100%。
• height:设置元素的高度为0。这似乎很奇怪，但是大家稍后将在padding-bottom属性中解释。
• padding-bottom:设置元素的下部内边距为100%。这个值等于元素的宽度，所以大家的元素在竖直方向上看起来是一个正方形。
• border-radius:设置元素的边框为50%，这样就可以将其转换为一个圆形。
• background-color:将元素的背景颜色设置为红色。你可以更改这个值，以获得不同的颜色。

这就是大家如何使用CSS百分比高度来画圆形的简单示例。希望这篇文章能够帮助你更深入了解CSS。