我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
当前回答
宽度和高度取决于大小,但要保持两者相等 .circle { 背景颜色:灰色; 身高:400 px; 宽度:400 px; 这个特性:100%; } < div class = "圆" > < / div >
其他回答
.circle { 高度:20眼动; 宽度:20眼动; 这个特性:50%; background - color: # EF6A6A; } < div class = "圆" > < / div >
使用多个(20+)水平或垂直1px div来构建一个圆也是个坏主意。这个jQuery插件使用这个方法来构造不同的形状。
对于circle,创建一个div元素,然后输入width = 2倍的边框半径= 2倍的填充。同样line-height = 0 例如,用50px作为圆的半径,下面的代码工作得很好:
width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;
宽度和高度取决于大小,但要保持两者相等 .circle { 背景颜色:灰色; 身高:400 px; 宽度:400 px; 这个特性:100%; } < div class = "圆" > < / div >
我有4个解决方案来完成这个任务:
这个特性 clip-path 伪元素 径向渐变
#circle1 { background-color: #B90136; width: 100px; height: 100px; border-radius: 50px;/* specify the radius */ } #circle2 { background-color: #B90136; width: 100px;/* specify the radius */ height: 100px;/* specify the radius */ clip-path: circle(); } #circle3::before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50px;/* specify the radius */ background-color: #B90136; } #circle4 { background-image: radial-gradient(#B90136 70%, transparent 30%); height: 100px;/* specify the radius */ width: 100px;/* specify the radius */ } <h3>1 border-radius</h3> <div id="circle1"></div> <hr/> <h3>2 clip-path</h3> <div id="circle2"></div> <hr/> <h3>3 pseudo element</h3> <div id="circle3"></div> <hr/> <h3>4 radial-gradient</h3> <div id="circle4"></div>