CSS3圖檔邊框
使用CSS3
border-image
屬性，你可以在元素的周圍設定圖檔邊框。
-
- *
一、浏覽器支援
表中的數字指定完全支援該屬性的第一個浏覽器版本。
數字後面的 -webkit- 或者 -moz- 使用時需要指定字首。
二、CSS3 border-image
border-image
CSS3
border-image
屬性允許您指定要用來代替元素周圍的正常邊界的圖像。屬性有三個部分:
- 作為邊框的圖檔。
- 在哪裡分割圖像。
- 确定中間部分應重複或延伸。
以下面的圖像(叫做 "border.png")為例：
原理分析：
border-image
性将圖像分割成九個部分，就像一個井字遊戲闆。然後将角放在拐角處，中間部分按指定的順序重複或拉伸。
注意:
讓
border-image
正常工作, 元素也需要設定邊框屬性!
1. 圖像的中間部分重複建立邊界，圖檔作為邊框
CSS代碼：
<!DOCTYPE CSS>
<CSS lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body>
<p id="borderimg">在這裡，圖像的中間部分被延伸來建立邊界.</p>
<p>這裡是原始圖像:</p><img src="img/border.png">
</body>
</CSS> 代碼如下：
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(img/border.png) 30 round; /* Opera 11-12.1 */
border-image: url(img/border.png) 30 round;
} 2. 圖像的中間部分延伸到建立邊界：使用圖檔作為邊框!
執行個體代碼：
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 30 stretch;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 30 stretch;
/* Opera 11-12.1 */
border-image: url(img/border.png) 30 stretch;
} border-image
屬性是
border-image-source
,
border-image-slice
border-image-width
border-image-outset
和
border-image-repeat
的縮寫.
1. 不同的切片值
不同的切片值完全改變邊框的樣子：
執行個體 1
border-image: url(border.png) 50 round;
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 50 round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 50 round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 50 round;
} 執行個體 2
border-image: url(border.png) 20% round;
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 20% round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 20% round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 20% round;
} 執行個體 3
border-image: url(border.png) 30% round;
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(img/border.png) 30% round;
/* Safari 3.1-5 */
-o-border-image: url(img/border.png) 30% round;
/* Opera 11-12.1 */
border-image: url(img/border.png) 30% round;
} 三、總結
本文基于CSS基礎，使用CSS語言，介紹了有關CSS定義圖檔邊框的知識點，從基礎的屬性概念入手 ，border-image的用法，在實際應用中需要注意的問題，做了詳細的講解。通過一個個執行個體的示範。希望幫助你更好的學習CSS。
想學習更多Python網絡爬蟲與資料挖掘知識，可前往專業網站：
http://pdcfighting.com/![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)