相關屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius css3
取值：
- <length>：
- 由浮點數字和單位標識符組成的長度值。不可爲負值。
- border-top-left-radius：
- 由浮點數字和單位標識符組成的長度值。不可爲負值。
說明：
- 第一個值是水平半徑。
- 若是第二個值省略，則它等於第一個值，這時這個角就是一個四分之一圓角。
- 若是任意一個值爲0，則這個角是矩形，不會是圓的。
- 值不容許是負值。
radius，就是半徑的意思。用這個屬性能夠很容易作出圓角效果，固然，也能夠作出圓形效果。原理很簡單，「正方形的內切圓的半徑等於正方形邊長的一半」。下面就作一個紅色的圓。web
完整的代碼以下：算法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3的border-radius屬性</title>
<style>
.circle {
background-color:#f00;
width: 600px; /* div的寬和高爲600px即正方形的邊長爲600px */
height: 600px;
text-align: center;
-moz-border-radius: 300px; /* 圓的半徑爲邊長的一半，即300px */
-webkit-border-radius: 300px;
border-radius: 300px;
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
font:normal 80px/100% Arial;
text-shadow:1px 1px 1px #000;
color:#fff;
}
</style>
</head>
<body>
<div class="circle">
Hello,World!
</div>
</body>
</html>
接下來用這個屬性作一個奧運五環，與前面不一樣的是，圓環是有邊的厚度的，這裏用的是相對單位em。代碼以下：chrome
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Olympic Flag</title>
<style type="text/css" media="screen">
body {
margin:20px;
background-color:#efefef;
}
ul.flag {
list-style-type:none;
position: relative;
margin: 20px auto;
}
.flag li, .flag li:before, .flag li:after {
-webkit-border-radius: 6em;
-moz-border-radius: 6em;
border-radius: 6em;
position: absolute;
}
.flag li {
width: 12em;
height: 12em;
left: 0;
top: 0;
font-size: 1em;
}
.flag li:after {
display: block;
content: "";
top: -0.1em;
left: -0.1em;
right: -0.1em;
bottom: -0.1em;
border: solid 1.4em black;
}
.flag .blue { z-index: 10; left: 0; top: 0; }
.flag .yellow { z-index: 20; left: 6.8em; top: 5.7em; }
.flag .black { z-index: 21; left: 13.6em; top: 0; }
.flag .green { z-index: 20; left: 20.4em; top: 5.7em; }
.flag .red { z-index: 10; left: 27.2em; top: 0px; }
.flag .blue:after { border-color: blue; }
.flag .yellow:after { border-color: yellow; }
.flag .black:after { border-color: black; }
.flag .green:after { border-color: green; }
.flag .red:after { border-color: red; }
/* 藍色壓住黃色 */
.flag .blue.alt { z-index: 24; }
.flag .blue.alt,
.flag .blue.alt:before,
.flag .blue.alt:after {
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* 黃色壓住黑色 */
.flag .yellow.alt { z-index: 23; }
.flag .yellow.alt,
.flag .yellow.alt:before,
.flag .yellow.alt:after {
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* 綠色壓住黑色 */
.flag .green.alt { z-index: 23; }
.flag .green.alt,
.flag .green.alt:before,
.flag .green.alt:after {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
/* 紅色壓住綠色 */
.flag .red.alt { z-index: 23; }
.flag .red.alt,
.flag .red.alt:before,
.flag .red.alt:after {
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
</style>
</head>
<body>
<ul class="flag">
<li class="blue"></li>
<li class="blue alt"></li>
<li class="yellow"></li>
<li class="yellow alt"></li>
<li class="black"></li>
<li class="green"></li>
<li class="green alt"></li>
<li class="red"></li>
<li class="red alt"></li>
</ul>
</body>
</html>