溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS中border-image屬性的使用方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
在CSS入門教程中，我們學習了邊框樣式border-style，其中邊框只有實線、虛線、點狀線等幾種簡陋的形式。那假如我們想要為邊框添加漂亮的背景圖片，那該怎么做呢？
在CSS3中，我們可以使用border-image屬性為邊框添加背景圖片。
說明：
從語法分析，我們可以看出，使用border-image屬性設置邊框背景圖片需要設置3種參數：
（1）圖片路徑；
（2）切割圖片的寬度（4條邊的寬度，依次為上邊、右邊、下邊、左邊，按照順時針方向，類似于border屬性的4條邊順序）；
（3）圖片平鋪方式；
假如我們要把下面這張圖作為（90px×90px）元素邊框的背景圖片，應該怎么做呢？（下面每個小方塊30px×30px）
舉例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image屬性</title>
<style type="text/css">
#div1
{
width:210px;
height:150px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-moz-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
看完了這篇文章，相信你對CSS中border-image屬性的使用方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
