CSS3中的邊框屬性怎么使用

這篇文章主要講解了“CSS3中的邊框屬性怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3中的邊框屬性怎么使用”吧！

　　css3邊框

　　（1）邊框陰影

　　box-shadow：h-shadowv-shadowblurspreadcolorinset

　　h-shadow，v-shadow：水平和垂直方向的陰影位置，可以寫負值

　　blur：模糊距離（值越大越模糊）。

　　spread：陰影的尺寸

　　color：陰影的顏色

　　inset：將外部陰影(outset)改為內部陰影

　　前面兩個值是必選的，后面四個值是可選的

　　div{

　　width:100px;

　　height:100px;

　　background-color:pink;

　　box-shadow:10px10px10pxgray;

　　}

　　Image16.jpg

　　（2）邊框圖片

　　border-image:srcslicewidthoutsetrepeat

　　src：圖片的路徑。

　　slice：圖片邊框向內偏移。

　　width：圖片邊框的寬度。

　　outset：邊框圖像區域超出邊框的量。

　　repeat：圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)

　　注意瀏覽器兼容問題

　　div{

　　border:20pxsolidtransparent;

　　width:100px;

　　height:50px;

　　line-height:50px;

　　text-align:center;

　　padding:10px20px;

　　border-image:url(images/12.png)5050round;

　　-moz-border-image:url(images/12.png)5050round;/*Firefox*/

　　-webkit-border-image:url(images/12.jpg)5050round;/*Safari和Chrome*/

　　-o-border-image:url(images/12.png)5050round;/*Opera*/

　　}

　　Image21.jpg

　　（3）邊框圓角

　　border-radius

　　div{

　　width:150px;

　　height:30px;

　　border:2pxsolid#ccc;

　　border-radius:25px;

　　line-height:30px;

　　text-align:center;

　　}

感謝各位的閱讀，以上就是“CSS3中的邊框屬性怎么使用”的內容了，經過本文的學習后，相信大家對CSS3中的邊框屬性怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！