css3 border radius 邊框圓角詳解

傳統的圓角生成方案，必須使用多張作為背景圖案。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-radius:50px;

border-radius可以同時設定1到4個值。（想想我們之前的margin與padding）如果設定1個值，表示4個圓角都使用這個值。如果設定兩個值，表示左上角和右下角使用第乙個值，右上角和左下角使用第二個值。如果設定三個值，表示左上角使用第乙個值，右上角和左下角使用第二個值，右下角使用第三個值。如果設定四個值，則依次對應左上角、右上角、右下角、左下角（順時針順序）。

例：

border-radius:50px25px;//表示左上角和右下角使用第乙個值，右上角和左下角使用第二個值

border-radius:25px10px50px;//左上角使用第乙個值，右上角和左下角使用第二個值，右下角使用第三個值

border-radius:25px10px50px0;//左上角、右上角、右下角、左下角(順時針順序)

border-radius:50px/25px;

border-radius:100px25px80px5px/45px25px30px15px;

除了同時設定四個圓角以外，還可以單獨對每個角進行設定。對應四個角，css3提供四個單獨的屬性：

* border-top-left-radius

* border-top-right-radius

* border-bottom-right-radius

* border-bottom-left-radius

這四個屬性都可以同時設定1到2個值。如果設定1個值，表示水平半徑與垂直半徑相等。如果設定2個值，第乙個值表示水平半徑，第二個值表示垂直半徑。

border-top-left-radius:50px;

border-top-left-radius:50px100px;//第乙個值表示水平半徑，第二個值表示垂直半徑。

實現**：

width:0;

height:0;
border:100pxsolid gray;
border-radius:100px;
border-right-color:#fff;

height:100px;

width:200px;
background:red;
border-radius:100px/50px;

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...