我正在尝试使用边框半径转换一些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