我正在嘗試使用邊框半徑轉換一些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總是圈，而不是蛋？ 在此先感謝，丹尼爾

來源

2012-07-12 Daniel Garcia Sanchez

你能做出的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:45:57 abhshkdz

是的，但我需要百分數。謝謝你，朋友。 – 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 15:59:42 techfoobar

哇！我要去測試它！謝謝 – 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>

來源

2016-06-01 18:54:00 juditth

請添加關於什麼使您認爲您的代碼適用於OP的說明。這對未來所有觀衆都有所幫助，解釋爲什麼這是一個解決方案 – techspider 2016-06-01 19:11:54

使用邊框半徑繪製圓圈

回答

JQuery的

相關問題