今天將和大家分享css3中邊框屬性的用法,具有一定的參考價值,希望對大家有幫助。
CSS3中的邊框增加了許多新的功能,使我們的邊框設計變得更加好看,接下來將在文中詳細的為大家介紹幾種邊框的用法
css3邊框
(1)邊框陰影
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow ,v-shadow:水平和垂直方向的陰影位置,可以寫負值
blur :模糊距離(值越大越模糊)。
spread:陰影的尺寸
color :陰影的顏色
inset:將外部陰影(outset) 改為內部陰影
前面兩個值是必選的,後面四個值是可選的
div{ width:100px; height: 100px; background-color: pink; box-shadow:10px 10px 10px gray; }
#(2)邊框圖片
##border-image: src slice width outset repeatsrc : 圖片的路徑。 slice:圖片邊框向內偏移。 width:圖片邊框的寬度。 outset:邊框影像區域超出邊框的量。 repeat:圖片邊框是否要平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)注意瀏覽器相容問題div{ border:20px solid transparent; width:100px; height:50px; line-height: 50px; text-align: center; padding:10px 20px; border-image:url(images/12.png) 50 50 round; -moz-border-image:url(images/12.png) 50 50 round; /* Firefox */ -webkit-border-image:url(images/12.jpg) 50 50 round; /* Safari 和 Chrome */ -o-border-image:url(images/12.png) 50 50 round; /* Opera */ }
#(3)邊框圓角
border-radiusdiv{ width:150px; height:30px; border:2px solid #ccc; border-radius:25px; line-height: 30px; text-align: center; }總結:以上就是本篇文章的全部內容了。希望對大家有幫助。
以上是CSS3中邊框屬性如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!