border-image屬性如何使用？ border-image屬性教學詳解
- 云罗郡主轉載
- 2018-10-23 16:06:494012瀏覽
本篇文章帶給大家的內容是關於border-image屬性如何使用？ 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>
本篇文章帶給大家的內容是關於border-image屬性如何使用？ border-image屬性教學詳解，如果您想了解更多有關CSS3影片教學#，請追蹤PHP中文網。
以上是border-image屬性如何使用？ border-image屬性教學詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：lvyestudy.com。如有侵權，請聯絡admin@php.cn刪除