在css 3中可以設定邊框圓角、邊框陰影和邊框影象，分別通過border-radius、border-image和box-shadow屬性設定。
border-radius屬性是以下4個屬性的簡寫：
border-top-left-radius 設定左上角的圓角
border-top-right-radius 設定右上角的圓角
border-bottom-right-radius 設定右下角的圓角
border-bottom-left-radius 設定左下角的圓角
以上每個屬性可以設定最多兩個值，第乙個值是水平軸的長度，第二個值是垂直軸的長度。如果設定乙個值，則第二個值等於第乙個值，即乙個正圓；如果設定設定兩個不相等的值，則是乙個橢圓。
如果指定值為百分數，則相對於元素的border內邊界以內的區域的尺寸計算。
原理圖如下：
舉例：
1邊框陰影通過box-shadow屬性設定。border-radius: 4px 3px 6px / 2px 4px;23
/*等價於 */4
5border-top-left-radius: 4px 2px;
6border-top-right-radius: 3px 4px;
7border-bottom-right-radius: 6px 2px;
8border-bottom-left-radius: 3px 4px;
box-shadow的取值：inset offset-x offset-y blur-radius spread-radius color;
這是一組完整的取值，每個值之間用空格隔開。一組值代表乙個陰影，可以設定多個陰影，也就是可以設定多組值，每組值之間用逗號隔開。
inset 表示陰影在元素的border內。預設情況不用設定inset，表示陰影在border外。陰影在元素的border內，不是說原來在border右外邊界外的陰影會出現在border右內邊界以內，而是出現在border的左內邊界以內。
offset-x、offset-y設定陰影的偏移量。
offset-x設定陰影的水平偏移量，正值，陰影在border右外邊界外；負值，陰影在border左外邊界外。
offset-y設定陰影的垂直偏移量，正值，陰影在border下外邊界外；負值，陰影在border上外邊界外。
blur-radius 預設為0，此時陰影邊緣銳利。值越大，陰影隨之變大變淡，邊緣也越模糊。不能指定為負值。這個值是分別在陰影的上下左右額外增加指定值一半的模糊距離。
spread-radius 預設為0，此時陰影的尺寸與元素的border+padding+width或height的尺寸一樣大。指定為正值，陰影以陰影自身的中心點擴大指定的值；指定為負值，陰影以陰影自身的中心點收縮指定的值。
color 指定陰影的顏色。
使用border-image之前一定要現制定邊框的樣式 border-style，本質上主要是要先指定border的寬度。
使用border-image之後，其將會替換掉之前設定的邊框樣式。
border-image是以下5個屬性的簡寫。
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-image-slice的值最多可以指定5個。前4個值為數字或百分數，為數字時單位為畫素（不要帶單位），為百分數時根據引用的尺寸計算。4個數值如果只指定乙個，則其餘三個也等於指定值；如果指定兩個，則第三個等於第乙個的值，第四個等於第二個的值；指定三個，則第四個也等於第二個的值。第五個值要麼不指定要麼只能指定為fill。
不指定fill時，第9部分被丟棄，指定fill時，保留第9部分，填充到元素的padding+width區域。
第1、2、3、4部分應用到邊框對應的4個角；第5、6、7、8部分根據後續邊框屬性的值應用到對用位置的邊框上。
border-image-width用來代替之前指定的border的寬度。如果不指定，（預設為auto）則還用border之前指定的寬度。
該屬性可以用具體畫素數、數字（表示倍數）和百分數指定。當為百分數時，根據元素border+padding+width或height計算。
最多指定4個值，最少1個值，分別表示上右下左位置的邊框的寬度。
如果指定的值大於之前指定的border的寬度，則將會向元素的padding和width區域延伸。
border-image-outset用於指定邊框影象延伸到border外邊界以外的距離。可以指定1~4個值，畫素數或數字（表示倍數）。
border-image-repeat作用是是否邊框影象的5、6、7、8部分是否重複填充對應的邊框區域。可取以下幾個值中的乙個：
stretch 僅僅拉伸到適當尺寸以填充邊框的對應區域，不重複。
repeat 在不縮放的前提下，重複以填充對應區域，當填充到最後，餘下的空間不足以容納整張（整部分）時，會將超出的部分裁掉以填充餘下空間。
round 會對進行縮放以使剛好有整數個重複填充對應部分。
space 不縮放以進行重複填充。當填充到最後，餘下的空間不足以容納整張（整部分）時，會將這餘下的空間均分到之前重複部分的兩側。
css 科技 邊框 CSS3 邊框
css3 邊框 css3 邊框 通過 css3，您能夠建立圓角邊框，向矩形新增陰影，使用來繪製邊框 並且不需使用設計軟體，比如 photoshop。在本章中，您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...
css 科技 邊框 CSS3 邊框
css3 邊框 css3 邊框 通過 css3，您能夠建立圓角邊框，向矩形新增陰影，使用來繪製邊框 並且不需使用設計軟體，比如 photoshop。在本章中，您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...
css3 下邊框緩緩劃過 CSS3 邊框
css3 邊框 用 css3，你可以建立圓角邊框，新增陰影框，並作為邊界的形象而不使用設計程式，如 photoshop。在本章中，您將了解以下的邊框屬性 border radius box shadow border image css3 圓角 在 css2 中新增圓角棘手。我們不得不在每個角落使用...