gpt4 book ai didi

css - 如何设置圆形 div 的样式?

转载 作者:行者123 更新时间:2023-11-28 14:36:14 30 4
gpt4 key购买 nike

我该如何设置这个圆形 div 的样式?它不是您所看到的纯圆形,它略有不同,不均匀但也很圆润。

enter image description here

我正在尝试使用 border-radius 但它看起来不那么漂亮,它似乎有 block 状

.circle {
border-radius: 42%;
transform: rotate(46deg);
height: 70px;
width: 70px;
background: green;
}
<div class="circle"></div>

最佳答案

使边框半径为宽度/高度的一半。您必须非常聪明地让文本和图像适合圆圈。

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<h1> Header </h1>
<p> Hi
<div class="circle" id="circle"> ! </div>
</p>
</body>
</html>

CSS:

.circle {
border-radius: 100px;
height: 200px;
width: 200px;
background: green;
margin: auto;
text-align:center;
}

结果:

Circle

关于css - 如何设置圆形 div 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53472955/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com