css邊框?qū)傩?/h3>

通過(guò)css3，能夠創(chuàng)建圓角邊框，向矩形添加陰影，使用圖片來(lái)繪制邊框

• border-radius
• box-shadow
• border-image

Note:
對(duì)于border-image,Safari 5以及更老的版本需要前綴 -webkit-.
Opera 支持 border-radius 和 box-shadow 屬性，但是對(duì)于 border-image 需要前綴 -o-。

CSS3 圓角邊框

在 CSS2 中添加圓角矩形需要技巧。我們必須為每個(gè)圓角使用不同的圖片。
在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角：

div {
    width: 284px;
    line-height: 40px;
    text-align: center;
    background: #0a8;
    color: #fff;
    border-radius: 28px;
    border: 2px solid #333333;
}

圓角

定義和用法
border-radius屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置四個(gè) border-*-radius屬性。

"border-*-radius"屬性的兩個(gè)長(zhǎng)度或百分比值定義了四分之一橢圓的半徑，該橢圓定義了外邊界邊角的形狀（如圖）。

第一個(gè)值是水平半徑，第二個(gè)值時(shí)垂直半徑。如果省略第二個(gè)值，則從第一個(gè)值復(fù)制。如果任一長(zhǎng)度為零，則角是直角，不是四舍五入。

水平半徑的百分比指的是邊框的寬度，而垂直半徑的百分比是指邊框的高度。不支持負(fù)值。

border-top-left-radius: 55pt 25pt' 的兩個(gè)值定義角的曲率

語(yǔ)法

border-radius: 1-4 length|% / 1-4 length|%;

Note:
按此順序設(shè)置誒個(gè)radio的四個(gè)值。如果省略bottom-left,則與top-right相同。如果省略bottom-right，則與top-left值相同。如果省略top-right,則與top-left相同。

其實(shí)border-radius的分開(kāi)寫(xiě)的順序是從左上角順時(shí)針書(shū)寫(xiě)的。
如圖：

四個(gè)值

如果是三個(gè)值，那么第一個(gè)是設(shè)置top-left,第二個(gè)值是top-right和bottom-left，第三個(gè)值時(shí)設(shè)置bottom-right。

image.png

如果是兩個(gè)值，那么 top-left和bottom-right相等，為第一個(gè)值，top-right和bottom-left值相等，為第二個(gè)值。

兩個(gè)值

取值
length 或 %

實(shí)例

border-radius: 2em;

等價(jià)于：

border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

元素控制臺(tái)截圖

image.png

以上都是水平方向和豎直方向半徑相等的例子，下面舉兩個(gè)水平方向和豎直方向半徑不相同的例子：

border-radius: 2em 1em 4em / 0.5em 3em;

等價(jià)于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

'border-radius'設(shè)置四個(gè)"border-*-radius"屬性。如果斜杠之前和之后給出值。則斜杠之前的值是設(shè)置水平半徑，斜杠之后的值時(shí)設(shè)置垂直半徑。如果沒(méi)有斜杠，則值將兩個(gè)半徑相等。
每個(gè)半徑的四個(gè)值按照左上，右上，右下，左下的順序給出。如果省略左下角，則與右上角相同。如果省略右下角，則與左上角相同。如果省略右上角，則與左上角相同。

舉幾個(gè)例子來(lái)試下：

div{display: inline-block; border: 10px solid red;margin: 100px;}
.div1{width: 200px; height: 100px;border-radius: 0px 50px 32px/28px 50px 70px;}
.div2{width:100px; height: 200px; border-radius: 26px 106px 162px 32px/28px 80px 178px 26px;}
.div3{width:100px;height: 200px; border-radius: 20px 50px/ 20px 50px;}

image.png

Corner Shaping

填充邊緣（內(nèi)邊界）半徑是外邊框半徑減去對(duì)應(yīng)的邊框厚度。 在這導(dǎo)致負(fù)值的情況下，內(nèi)半徑為零。 （在這種情況下，其中心可能與外部邊界曲線(xiàn)的中心不一致。）同樣，內(nèi)容邊緣半徑是填充邊緣半徑減去相應(yīng)的填充，或者如果為負(fù)，則為零。 因此，彎曲區(qū)域中的邊界和填充厚度從鄰接側(cè)被內(nèi)插，并且當(dāng)兩個(gè)相鄰的邊界具有不同的厚度時(shí)，拐角將在更厚和更薄的邊界之間顯示出平滑的過(guò)渡。

image.png

Corner Clipping

image.png

兼容性

為了最大程度的兼容瀏覽器，我們需要設(shè)置如下：

-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px; 

border-image

border-image 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置以下屬性：

Note:請(qǐng)使用bo'rder-image-*屬性來(lái)構(gòu)造漂亮的可伸縮按鈕！

屬性詳解

• border-image-source
  指定一個(gè)圖像用來(lái)替代 <' [border-style]'> 邊框樣式的屬性。
  當(dāng) <' border-image '> 為none或圖像不可見(jiàn)時(shí)，將會(huì)顯示 <' [border-style]'> 所定義的邊框樣式效果。

• border-image-slice
  如果對(duì)clip屬性（clip:rect(上 右 下 左))比較了解，這個(gè)就不難理解了。border-image-slice的效果實(shí)現(xiàn)就像是個(gè)剪裁工具，把邊框圖片分成9宮格，在重新安置，變形。其有1~4個(gè)參數(shù)，方位規(guī)則符合CSS普遍的方位規(guī)則（上右下左的順序），再賦予剪裁的含義。

  border-image-slice該屬性指定從上，右，下，左方位來(lái)分隔圖像，將圖像分成4個(gè)角(紅色的四個(gè)邊角的菱形區(qū)域稱(chēng)為“角邊框圖片”)，在border-image中，角邊框圖片是沒(méi)有任何展示效果的，不會(huì)平鋪，不會(huì)重復(fù)，也不會(huì)拉伸，有點(diǎn)類(lèi)似于視覺(jué)中盲點(diǎn)的意思。4條邊（橙色塊）和中間區(qū)域共9份，中間區(qū)域始終是透明的（即沒(méi)圖像填充），除非加上關(guān)鍵字 fill。

• border-image-width
  該屬性用于指定使用多厚的邊框來(lái)承載被裁剪后的圖像。
  該屬性可省略，由外部的 <' [border-width]'> 來(lái)定義。

• border-image-repeat
  取值

  • stretch 用拉伸方式來(lái)填充邊框背景圖。
  • repeat：重復(fù)。當(dāng)圖片碰到邊界時(shí)，如果超過(guò)則被截?cái)唷?/li>
  • round：用平鋪方式來(lái)填充邊框背景圖。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的大小直至正好可以鋪滿(mǎn)整個(gè)邊框。
  • space：圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿(mǎn)整個(gè)邊框。

這里的重復(fù)性有別于background-repeat,背景圖片就是repeat\no-repeat\repeat-x\repeat-y.而對(duì)于border-image,repeat只是其中一個(gè)屬性，其余兩個(gè)是round（平鋪）和stretch(拉伸默認(rèn)）。

九宮格

這張圖能夠幫助我們更好的理解border-image的剪裁及繪制的原理。

邊框?qū)order-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中間的內(nèi)容區(qū)域。假設(shè)現(xiàn)在邊框的寬度是27像素，則上面所說(shuō)的九部分正如下圖所表示的：

平鋪與重復(fù)的區(qū)別

• 平鋪可能會(huì)改變?cè)瓐D顯示的大小
• 重復(fù)不改變圖片顯示的大小
  重復(fù)類(lèi)似于家里貼地板磚，邊角會(huì)看到很多半截的瓷磚。

效果分析

效果原理如圖

CSS3邊框陰影

參考文檔：
W3C官方文檔： CSS Backgrounds and Borders Module Level 3