问题描述：

我正在尝试使用边框半径转换一些div。我几乎得到它，但有时div的看起来像“蛋”哈哈这是我的CSS：使用边框半径绘制圆圈

#div{ /*div central*/ 
    position:absolute; 
    top:50%; 
    margin-top: -20%; 
    left:50%; 
    margin-left: -20%; 
    background: #00A8D9; 
    width: 40%; 
    height: 40%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    border:3px solid #000; 
} 
#divSupIzq,#divSupDer,#divInfIzq,#divInfDer{ /*DIVs: left-top , right-top, left-bottom, right-bottom*/ 
    background: #ddd; 
    width: 20%; 
    height: 20%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    border:3px solid #fff; 
    position:absolute; 
} 
#divSupIzq{ /*Div left-top*/ 
    top:15%; 
    left:10%; 
} 
#divSupDer{ /*Div right-top*/ 
    top:15%; 
    right:10%; 
} 
#divInfIzq{ /*Div left-bottom*/ 
    bottom:15%; 
    left:10%; 
} 
#divInfDer{ /*Div right-bottom*/ 
    bottom:15%; 
    right:10%; 
}

而在HTML中，我使用JavaScript/jQuery的，以改变每个格（在基本的文本内容div的：左上，右上，左下，右下，并在中央DIV号）上依赖于各格的大小：

$('#div').resize(function(height){ 
        var fuente = $(this).height()/2; 
        var margen = (fuente/2)-5; 
        $('.contenido').css('font-size',fuente+'px'); 
        $('.contenido').css('margin-top',margen+'px'); 
       });

这是我在镀铬的波纹扩展怎么看： https://www.dropbox.com/s/k71kz5lahfolw95/screen.JPG

你能帮我，为了divs总是圈，而不是蛋？ 在此先感谢，丹尼尔

你能做出的jsfiddle？而且由于你在任何地方都使用百分比，形状可能会根据窗口大小而变化。 – dezman 2012-07-12 15:45:18

这是来自以上信息的[jsFiddle]（http://jsfiddle.net/eC3jq/）。 – 2012-07-12 15:47:49

是的，我需要使用百分比来适应不同的分辨率 – 2012-07-12 15:50:40

答

要绘制圆：

HTML

<div id="circle"></div>

CSS

#circle { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
}

Here是上述的小提琴。

固定的宽度和高度：http://jsfiddle.net/eC3jq/1/

circle包含在div以便％的宽度和高度正常工作：http://jsfiddle.net/eC3jq/2/

来源：CSS-Tricks

是的，但我需要百分数。谢谢你，朋友。 – 2012-07-12 15:49:25

除非你把它放在div中，否则你不能用百分比来做，因为浏览器窗口的高度和宽度是不同的。所以，他们的％也会有所不同。 – abhshkdz 2012-07-12 15:52:59

那么，我如何绘制圆形并将它们定位在屏幕的不同分辨率？你有什么建议吗？感谢您的帮助 – 2012-07-12 15:54:36

答

工作演示：http://jsfiddle.net/XtTkG/3/

演示通过使用window对象的resize事件而不是div本身来工作。在每个调整我们的大小div和它的边界半径，使之呈现为一个完美的圆圈（即宽度=高度和半径=宽度/ 2）

代码：

$(window).resize(function(height) { 
    var div = $('#div'); 
    var width = $('body').width() * 0.4; 
    var radius = width/2; 
    width += 'px'; 
    radius += 'px'; 
    div.css({ 
     width: width, height: width, 
     '-moz-border-radius' : radius, 
     '-webkit-border-radius' : radius, 
     'border-radius' : radius 
    }); 

    // rest of your code for font-size setting etc.. 
}); 

$(window).resize();

哇！我要去测试它！谢谢 – 2012-07-12 16:06:47

答

JQuery的

这也可以是有用的，如果你将所有这些代码复制到你的网站，它将起作用。或者，你可以看到一个演示：

https://jsfiddle.net/whLctrp4/

HTML代码调用jQuery函数：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 

    </head> 
    <body> 

    <div class="pies"> 
    </div>

包括JQuery的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

drawPie功能 - 德作为参数ID/HTML类属性附加伤害，大小（单位为px），填充的百分比和馅饼的颜色

<script> 

    function drawPie (id, size, percent, color) {        
     var sizeString = "" + size + "px";      
     var grad = 360/100*percent+90;  
     console.log(grad); 
     var pie = $("<span></span>"); 

     pie.css({"width": sizeString, 
      "height": sizeString,    
      "display": "block", 
      "border-radius": "50%", 
      "background-color": color,       
      "float": "left", 
      "margin": "5px"    
     });   

     if(percent <= 50){ 
      pie.css({"background-image": "linear-gradient("+ grad + "deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%)"}); 
     } else if (percent >= 100) { 
      pie.css({"background-image": "none"}); 
     } else {         
      pie.css({"background-image": "linear-gradient("+ (grad+180) + "deg, transparent 50%, "+color+" 50%), linear-gradient(+90deg, white 50%, transparent 50%)"});     
     } 

     $(id).append(pie); 
    }

对于周期作秀，它是如何工作：

for(i=0; i<=100; i+=1){ 
     drawPie(".pies", 100, i, "orange"); 
    } 

    </script>  

    </body> 

</html>

请添加关于什么使您认为您的代码适用于OP的说明。这对未来所有观众都有所帮助，解释为什么这是一个解决方案 – techspider 2016-06-01 19:11:54

使用边框半径绘制圆圈

JQuery的

相关推荐