注意:使用Css3新特性要注意瀏覽器的兼容性,低版本的瀏覽器的兼容性不好或者說不支持這幾種屬性
邊框:能夠創建圓角邊框,向矩形添加陰影,使用圖片來繪製邊框----並且不需要使用軟件來設計。
用到的屬性:border-radius box-shadow border-image
注意:
1.Internet Explorer 9 支持 border-radius 和 box-shadow。
2.Firefox 支持所有新的邊框屬性。
3.Chrome 和 Safari 支持 border-radius 和 box-shadow,但是對 border-image 的支持需要前綴 -webkit-。
4.Opera 支持 border-radius 和 box-shadow,但是對 border-image 的支持需要前綴 -o-。
示例代碼:
1.向div元素添加圓角邊框
div{ width:30px;border:2px soild #a1a1a1; border-radius:20px; -moz-border-radius:20px;/*舊版本的火狐,兼容性的適配*/}
2.向div元素添加陰影
.div{width:300px;height:300px;background-color:#ff9900;box-shadow:10px 10px 5px #888888;--moz-box-shadow:10px 10px #888888;/*the old Firefox*/}
陰影是在元素的正下面,元素有多大陰影就有多大,所以10px 10px #888888 的含義分別是:相對元素陰影向右平移10px,向下平移10px,陰影向內腐蝕5px 陰影的顏色是#888888
3.使用圖片創建圍繞元素的邊框(瞭解就好)
border-image:url(border.png) 30 30 round
背景:
background-size:10px 10px 設置背景圖片的大小
background-origin 屬性規定背景圖片的定位區域。
背景圖片可以放置於 content-box、padding-box 或 border-box 區域。