border radius 圓角半徑

相關屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 

：

由浮點數字和單位識別符號組成的長度值。不可為負值。

border-top-left-radius：

由浮點數字和單位識別符號組成的長度值。不可為負值。 

第乙個值是水平半徑。

如果第二個值省略，則它等於第乙個值，這時這個角就是乙個四分之一圓角。

如果任意乙個值為0，則這個角是矩形，不會是圓的。

值不允許是負值。 

radius，就是半徑的意思。用這個屬性可以很容易做出圓角效果，當然，也可以做出圓形效果。原理很簡單，「正方形的內切圓的半徑等於正方形邊長的一半」。下面就做乙個紅色的圓。

完整的**如下：

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>css3的border-radius屬性
title
>
6<
style
>
7.circle 
38style
>
39head
>
40<
body
>
41<
div 
class
="circle"
>
42            hello,world!
43div
>
44body
>
45html
>

接下來用這個屬性做乙個奧運五環，與前面不同的是，圓環是有邊的厚度的，這裡用的是相對單位em。**如下：

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>the olympic flag
title
>
6<
style 
type
="text/css"
media
="screen"
>
7body 
11ul.flag 
1617
.flag li, .flag li:before, .flag li:after 
2324
.flag li 
3132
.flag li:after 
4142
.flag .blue   
43.flag .yellow 
44.flag .black  
45.flag .green  
46.flag .red    
4748
.flag .blue:after   
49.flag .yellow:after 
50.flag .black:after  
51.flag .green:after  
52.flag .red:after    
53/*
藍色壓住黃色 
*/54
.flag .blue.alt 
55.flag .blue.alt, 
56.flag .blue.alt:before, 
57.flag .blue.alt:after 
62/*
黃色壓住黑色 
*/63
.flag .yellow.alt 
64.flag .yellow.alt, 
65.flag .yellow.alt:before, 
66.flag .yellow.alt:after 
71/*
綠色壓住黑色  
*/72
.flag .green.alt 
73.flag .green.alt,
74.flag .green.alt:before,
75.flag .green.alt:after 
80/*
紅色壓住綠色  
*/81
.flag .red.alt 
82.flag .red.alt, 
83.flag .red.alt:before,
84.flag .red.alt:after 
89style
>
90head
>
91<
body
>
92<
ul class
="flag"
>
93<
li class
="blue"
>
li>
94<
li class
="blue alt"
>
li>
95<
li class
="yellow"
>
li>
96<
li class
="yellow alt"
>
li>
97<
li class
="black"
>
li>
98<
li class
="green"
>
li>
99<
li class
="green alt"
>
li>
100<
li class
="red"
>
li>
101<
li class
="red alt"
>
li>
102ul
>
103body
>
104html
>

border radius 圓角邊框

在css3.0中，又新增了乙個新的屬性border radius，使用border radius這個屬性可以實現圓角邊框的效果。除ie和遨遊外，目前有firefox safari，chrome，opera支援該屬性，其safari，chrome，opera是支援最好的，依照了w3c的標準，僅僅使用b...

關於圓角border radius

一 border radius 可以同時設定1 4個值 a 1個值 控制4個圓角 b 2個值 第1個控制左上角和右下角 第2個值控制左下角和右上角 c 3個值 第1個控制 第2個值控制左下角和右上角 第三個值控制右下角 d 4個值 依次控制4個圓角 從左上角 到 左下角 單個圓角的設定 border...

border radius圓角邊框屬性講解

語法 border radius length persentage 1.乙個屬性值。如border radius 6px 它表示元素四個方向的圓角大小都是6px，即每個圓角的 水平半徑 和 垂直半半徑 都設定為6px 2.四個屬性值，分別表示左上角 右上角 右下角 左下角的圓角大小 順時針方向 3...