CSS3屬性之一 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
>

CSS3屬性之一 border radius

相關屬性 border top right radius border bottom right radius border bottom left radius border top left radius 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radi...

一 CSS3動畫屬性

總結一下這週在逆戰班的學習 transition property 規定設定過渡效果的css屬性的名稱。all 預設值 指定 width height all。預設為所有可以進行過渡的css屬性。如果提供多個屬性值，以逗號進行分隔。transition duration 規定完成過渡效果需要多少秒或...

css3新屬性（一）

box align start end center baseline stretch start 設定彈性盒模型物件的子元素從開始位置對齊 center 設定彈性盒模型物件的子元素居中對齊 end 設定彈性盒模型物件的子元素從結束位置對齊 baseline 設定彈性盒模型物件的子元素基線對齊 st...