css3新增的邊框?qū)傩裕?、“border-image”，該屬性是簡寫屬性用于設(shè)置元素邊框的樣式；2、“border-radius”，該屬性用于設(shè)置元素四角的圓角樣式；3、“box-shadow”，該屬性用于設(shè)置元素一個或多個下拉陰影的框。
本教程操作環(huán)境：windows10系統(tǒng)、css3&&html5版、dell g3電腦。
css3新增邊框?qū)傩杂心男?br>在css3中，新增的邊框?qū)傩杂校篵order-image、border-radius和box-shadow屬性。
1、border-image
border-image 屬性是一個簡寫屬性，用于設(shè)置以下屬性：
示例如下：
<html><head><style> div{border:15px solid transparent;width:300px;padding:10px 20px;}#round{-moz-border-image:url(/i/border.png) 30 30 round;/* old firefox */-webkit-border-image:url(/i/border.png) 30 30 round;/* safari and chrome */-o-border-image:url(/i/border.png) 30 30 round;/* opera */border-image:url(/i/border.png) 30 30 round;}#stretch{-moz-border-image:url(/i/border.png) 30 30 stretch;/* old firefox */-webkit-border-image:url(/i/border.png) 30 30 stretch;/* safari and chrome */-o-border-image:url(/i/border.png) 30 30 stretch;/* opera */border-image:url(/i/border.png) 30 30 stretch;}</style></head><body><div id=\”round\”>在這里，圖片鋪滿整個邊框。</div><br><div id=\”stretch\”>在這里，圖片被拉伸以填充該區(qū)域。</div><p>這是我們使用的圖片：</p><img src=\”//i/border.png\”><p><b>注釋：</b> internet explorer 不支持 border-image 屬性。</p><p>border-image 屬性規(guī)定了用作邊框的圖片。</p></body></html>
輸出結(jié)果：
2、border-radius
border-radius 屬性是一個簡寫屬性，用于設(shè)置四個角的圓角樣式，語法如下：
border-radius: 1-4 length|% / 1-4 length|%;
示例如下：
<html><head><style> div{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;border-radius:25px;-moz-border-radius:25px; /* 老的 firefox */}</style></head><body><div>border-radius 屬性允許您向元素添加圓角。</div></body></html>
輸出結(jié)果：
3、box-shadow
box-shadow屬性可以設(shè)置一個或多個下拉陰影的框。語法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
示例如下：
<html><head><meta charset=\”utf-8\”> <title>123</title> <style> div{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;}</style></head><body><div></div></body></html>
輸出結(jié)果：
（學習視頻分享：css視頻教程）