比使用图片更简单的方法来创建圆形div?


183

我想知道是否有比我现在更简单的创建循环div的方法。

目前,我只是为每种不同的尺寸制作图像,但是这样做很烦人。

无论如何,有没有使用CSS制作圆形的div,我可以指定半径吗?


1
必须在哪些浏览器中支持它?
2011年

看看我的回答此相关的问题,特别是演示:stackoverflow.com/questions/4451350/...
Orbling

1
您也可以使用SVG(VML)画一个圆。
jasssonpet '01

2
为什么不能调整图像的宽度和高度,而不是改变大小?这些图像有多大?
Mottie 2011年

Answers:


295

这是一个演示:http : //jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

要使此功能在IE8及更早版本中起作用,必须下载并使用CSS3 PIE。我上面的演示无法在IE8中运行,但这仅是因为jsFiddle无法托管PIE.htc

我的演示如下:


我不能让在Mozilla though..My网址在chrome.It DIV圆形的工作原理是chokate.maninactionscript.com/chokates点击沙漠图像或一个以前给它的图像缩放的显示的DIV不是circular..which在mozilla中。
techie_28 2012年

1
@ techie_28:div页面上的圆形的,您可以查看是否在其中添加了实例border: 5px solid red。问题在于“隐藏圆”的图像部分没有被隐藏。在这里,没有一种通常的变通办法特别容易应用。.我建议使用该-webkit-mask-image属性来修复WebKit浏览器(border-radius对于其他浏览器,请保留)。此处提供更多信息:webkit.org/blog/181/css-masks。您也可以考虑在Stack Overflow上提问,以了解其他人是否还有其他想法。
2012年

1
您也可以100%代替999px。
Tony Wickham

1
.htc不再受支持。
奥利弗·迪克森

我想知道如何在圆div内对齐对象(如按钮)!:D
Zibri

25

将元素各边的边界半径设置为50%,将创建任意大小的圆形显示:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

1
这可能是现在(2017年)应该使用的方法。
Scribblemacher

13

试试这个

.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;
   }




3

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

只是想提一下另一种解决方案,它回答了“比使用图像更简单的方法来创建圆形div的问题?”的问题。使用FontAwesome。

您可以从此处导入Fontawesome CSS文件或CDN

然后您只是:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

您可以根据需要使用任何字体大小的颜色。


2

您可以尝试radial-gradientCSS函数:

.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>

2

假设您有以下图片:

要圈出一个圆圈,您只需要添加

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

因此,如果您有div,则可以执行相同的操作。

检查以下示例:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>


1

您可以使用radius,但不能在IE:上使用border-radius: 5px 5px;


1

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}
<div class="circle"></div>


0

基本上,这是使用div的绝对位置在给定坐标处放置字符。因此,将参数方程式用于圆,可以绘制一个圆。如果将div的位置更改为相对位置,则会产生正弦波...

本质上,我们通过滥用位置属性来绘制方程式。我不太了解CSS,所以肯定有人可以使它更加优雅。请享用。

这适用于所有浏览器和移动设备(我知道)。我在自己的网站上使用它来绘制正弦波的文本(www.cpixel.com)。此代码的原始来源位于:www.mathopenref.com/coordcirclealgorithm.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>

这就是我想要的,但是是否有可能在面板中显示圆的列表,从而保持圆之间的适当距离,如下所示:plnkr.co/edit/KgWsnwDbgwiacGeJ7O7i?p=preview
Balu


-1

对于圆,创建一个div元素,然后输入width =边界半径的2倍=填充的2倍。同样line-height = 0例如,以50px作为圆的半径,下面的代码效果很好:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.