CSS3 瞭解

注意:使用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 區域。





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章