c 圆的面积css代码 |css input 不可点击

.circle {
height: 200px;
width: 200px;
border-radius: 50%; /*将边框半径设置为元素宽度的 50% 可以创建圆形*/
background-color: #f0f;
}
.circle::before {
content: ""; /*伪元素必须包含 content 属性*/
padding-top: 100%; /*将元素高度设置为 0%，宽度设置为 100%*/
display: block;
}
.circle span {
position: absolute; /*将 span 元素定位在圆形的中心*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*将元素向上和向左平移 50%*/
color: #fff;
font-size: 24px;
}

在以上代码中，大家使用了一个 div 元素作为圆形容器，将其宽度和高度都设置为 200px，并将边框半径设置为 50%。这使得容器边框的四个角都变成了圆弧，从而形成了一个圆形。接着，大家使用伪元素（::before）将容器的高度设置为 0%，宽度设置为 100%，这样就可以让 span 元素定位在圆形的中心。最后，大家在 span 元素中添加了一些文本，用于显示圆形的面积。

使用以上代码，大家可以轻松地创建一个圆形元素，并计算出其面积。这对于设计师来说非常有用，因为它可以在网页中创建出各种具有艺术感的图形，使得网页更加美观。同时，这种使用 CSS 创建圆形元素的方法也为大家提供了一个实用的工具，可以在设计和开发中大大提高工作效率。