這篇文章主要講解了“CSS3實現(xiàn)圓角邊框和邊界圖片效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS3實現(xiàn)圓角邊框和邊界圖片效果”吧！
成都創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，溫江服務(wù)器租用，溫江服務(wù)器租用，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。
本文的學(xué)習(xí)要點如下：
•圓角 border-radius
•盒陰影 box-shadow
•邊界圖片 border-image
1.圓角 border-radius
XML/HTML Code復(fù)制內(nèi)容到剪貼板
div {
width: 200px;
height: 100px;
padding:20px;
border: 1px solid red;
border-radius : 25px;
}
2.盒陰影 box-shadow
XML/HTML Code復(fù)制內(nèi)容到剪貼板
div {
width: 200px;
height: 100px;
background: red;
/*x軸偏移量 y軸偏移量 模糊程度 陰影顏色*/
box-shadow: 10px 10px 5px #000;
}
3.邊界圖片 border-image
html部分
XML/HTML Code復(fù)制內(nèi)容到剪貼板
注意: Internet Explorer 不支持 border-image 屬性。
border-image 屬性用于設(shè)置圖片的邊框。
這是我們使用的圖片素材：
css部分
CSS Code復(fù)制內(nèi)容到剪貼板
div {
width: 250px;
padding: 10px 20px;
border: 15px solid translate;
}
#round {
/*safari*/
/*圖片源 圖片邊界向內(nèi)偏移量 圖片的寬度 用于指定在邊框外部繪制 border-image-area 的量 樣式*/
-webkit-border-image : url(../images/border.png) 30 30 round;
/*opera*/
-o-border-image : url(../images/border.png) 30 30 round;
border-image : url(../images/border.png) 30 30 round;
}
#stretch {
-webkit-border-image : url(../images/border.png) 30 30 stretch;
-o-border-image : url(../images/border.png) 30 30 stretch;
border-image : url(../images/border.png) 30 30 stretch;
}
感謝各位的閱讀，以上就是“CSS3實現(xiàn)圓角邊框和邊界圖片效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS3實現(xiàn)圓角邊框和邊界圖片效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
