WEB 
CSS3 邊框的圓角與影像
| 版本 | 屬性 | 說 明 |
|---|---|---|
| 3 | border-radius | 區塊方框四個角的圓角設計。 參考【英文版】 【英文版】 【簡中版】 |
| 3 | border-image | 以影像設計區塊的邊框。
參考【英文版】
【簡中版】 border-image: source slice width outset repeat; border-image-source: url(border.png); 邊框圖像 border-image-slice: 50% 50%; 邊框圖像向內偏移的距離(%是圖像的百分比大小) border-image-width: 30 30; 邊框圖像的大小 border-image-outset: 30 30; 邊框圖像向外移動的距離 |
圓角範例已設定好的部份
<div class="b2"></div>
<style>
.b2 { width: 300px; height: 300px; margin: 30px auto; background-color: lightsteelblue; }
</style>
測試圓角的設計
邊框影像範例已設定好的部份
<div class="b2"></div>
<style>
.b3 { width: 350px; height: 200px; background-color: lightsteelblue;
margin: 30px auto; padding: 15px; border: 15px solid transparent; }
</style>
測試邊框影像的設計
參考圖：
border2.png
border3.png
border4.png