css3提供了border-radius的属性,可以为网页元素设置圆形的角,从而界面优美了不少,也避免了图形后成圆角的加载问题,下面罗列了利用border-radius制作的圆形、半圆、1/4圆及椭圆,充分展示它的强大功能。
示例效果:
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background: orange;
margin: 10px;
float: left;
}
#div1 {
border-radius: 50%;
}
#div2 {
height: 50px;
line-height: 50px;
border-radius: 50px 50px 0 0;
}
#div3 {
width: 50px;
border-radius: 0 50px 50px 0;
}
#div4 {
height: 50px;
line-height: 50px;
border-radius: 0 0 50px 50px;
}
#div5 {
width: 50px;
border-radius: 50px 0 0 50px;
}
#div6 {
border-radius: 100px 0 0 0;
}
#div7 {
border-radius: 0 100px 0 0;
}
#div8 {
border-radius: 0 0 100px 0;
}
#div9 {
border-radius: 0 0 0 100px;
}
#div10{
height: 50px;
line-height: 50px;
border-radius: 100px/50px;
}
#div11{
width: 50px;
border-radius: 50px/100px;
}
</style>
</head>
<body>
<div id="div1">
圆形
</div>
<div id="div2">
上半圆
</div>
<div id="div3">
右半圆
</div>
<div id="div4">
下半圆
</div>
<div id="div5">
左半圆
</div>
<div id="div6">
扇形1
</div>
<div id="div7">
扇形2
</div>
<div id="div8">
扇形3
</div>
<div id="div9">
扇形4
</div>
<div id="div10">
椭圆1
</div>
<div id="div11">
椭圆2
</div>
</body>
</html>