傳統的圓角生成方案,必須使用多張作為背景圖案。css3的出現,使得我們再也不必浪費時間去製作這些了,只需要
border-radius屬性,支援瀏覽器ie 9、opera 10.5、safari 5、chrome 4和firefox 4
一、border-radius屬性
css3圓角只需設定乙個屬性:border-radius(含義是"邊框半徑")。你為這個屬性提供乙個值,就能同時設定四個圓角的半徑。所有合法的css度量值都可以使用:em、px、百分比等等。
比如,下面是乙個div方框(寬高都是200,背景為紅色,邊框為2px solid #000)
現在設定它的圓角半徑為50px,即:
border這條語句同時將每個圓角的"水平半徑"和"垂直半徑"都設定為50px。-radius
:50px
;
border-radius可以同時設定1到4個值。(想想我們之前的margin與padding)如果設定1個值,表示4個圓角都使用這個值。如果設定兩個值,表示左上角和右下角使用第乙個值,右上角和左下角使用第二個值。如果設定三個值,表示左上角使用第乙個值,右上角和左下角使用第二個值,右下角使用第三個值。如果設定四個值,則依次對應左上角、右上角、右下角、左下角(順時針順序)。例:
border-radius
:50px
25px;//
表示左上角和右下角使用第乙個值,右上角和左下角使用第二個值
border-radius
:25px
10px
50px
;//左上角使用第乙個值,右上角和左下角使用第二個值,右下角使用第三個值
borderborder-radius還可以用斜槓設定第二組值。這時,第一組值表示水平半徑,第二組值表示垂直半徑。第二組值也可以同時設定1到4個值,應用規則與第一組值相同。-radius
:25px
10px
50px0;
//左上角、右上角、右下角、左下角(順時針順序)
border-radius
:50px
/25px
;
CSS3 CSS3外輪廓屬性
外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似,但和元素邊框border完全不同,外輪廓線不占用網頁布局空間,不一定是矩形,外輪廓是屬於一種動態樣式,只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了,主要是用來在元素周圍繪製一條輪廓線,可以起到...
css3 css的3種引入方式
你好!這是你第一次使用css所需要了解的知識點。如果你想學習如何使用css,可以仔細閱讀這篇文章,了解一下css的基本語法知識。css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用,在測試的時候可...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性,但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...