创建圈div比使用图像更容易的方法?

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

目前，我只是为每个不同的大小制作一个图像，但这样做很烦人。

有没有CSS可以让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>

2020-12-04 02:40:59

其他回答

基本上，这使用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>

2015-04-19 02:17:38

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

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

2012-10-22 07:43:35

试试这个

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

2011-10-13 12:01:10

宽度和高度取决于大小，但要保持两者相等 .circle { 背景颜色:灰色; 身高:400 px; 宽度:400 px; 这个特性:100%; ｝ < div class = "圆" > < / div >

2015-07-27 06:59:04

这里是一个演示: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。

我的演示是这样的:

2011-01-30 16:41:47

创建圈div比使用图像更容易的方法?

推荐文章

最新文章

标签