我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
我想知道是否有一个更简单的方法来创建循环div比我现在做的。
目前,我只是为每个不同的大小制作一个图像,但这样做很烦人。
有没有CSS可以让div变成圆形,我可以指定半径?
当前回答
试试这个
.iphonebadge {
border-radius:99px;
-moz-border-radius:99px;
-webkit-border-radius:99px;
background:red;
color:#fff;
border:3px #fff solid;
background-color: #e7676d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
background-image: linear-gradient(top, #e7676d, #b7070a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a');
-webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
-moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
display:inline-block;
padding:2px 2px 2px 2px ;
margin:3px;
font-family:arial;
font-weight:bold;
}
其他回答
.circle { 高度:20眼动; 宽度:20眼动; 这个特性:50%; background - color: # EF6A6A; } < div class = "圆" > < / div >
.fa-circle { 颜色:番茄; } div { 字体大小:100 px; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> < div > <我类=“fa fa-circle”aria-hidden = " true " > < / i > < / div >
只是想提到另一个解决方案,回答“更容易的方法创建圆div比使用图像?”这是使用FontAwesome。
你导入fontawesome css文件或从这里的CDN
然后你就:
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
你可以给它任意颜色任意字体大小。
你可以试试径向渐变CSS函数:
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
应用到一个div图层:
<div class="circle"></div>
添加css属性:
这个特性:50%;
对任何div都是圆形的。
宽度和高度取决于大小,但要保持两者相等 .circle { 背景颜色:灰色; 身高:400 px; 宽度:400 px; 这个特性:100%; } < div class = "圆" > < / div >