一篇文章帶你了解CSS3圖片邊框

SS3圖片邊框

使用CSS3 border-image 屬性，你可以在元素的周圍設置圖片邊框。

一、瀏覽器支持

表中的數字指定完全支持該屬性的第一個瀏覽器版本。

數字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。

二、CSS3 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/

素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。

CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。

邊框樣式

border-style屬性用來定義邊框的樣式。

border-style的值：

（1）編輯代碼

打開記事本，編寫其代碼，并保存為HTML格式文件。代碼如下。

（2)在瀏覽器中瀏覽效果

在瀏覽器中瀏覽效果如圖所示。

CSS3，你可以創建圓角邊框，添加陰影框，并作為邊界的形象而不使用設計程序，如Photoshop。

在這里邊您將了解以下的邊框屬性：

border-radius
box-shadow
border-image

CSS3 圓角

在CSS2中添加圓角棘手。我們不得不在每個角落使用不同的圖像。

在CSS3中，很容易創建圓角。

在CSS3中border-radius屬性被用于創建圓角：

這是圓角邊框！

實例

在div中添加圓角元素：

div

{

border:2px solid;

border-radius:25px;

}

CSS3盒陰影

CSS3中的box-shadow屬性被用來添加陰影:

實例

在div中添加box-shadow屬性

div

{

box-shadow: 10px 10px 5px #888888;

}

CSS3邊界圖片

有了CSS3的border-image屬性，你可以使用圖像創建一個邊框：

border-image屬性允許你指定一個圖片作為邊框！用于創建上文邊框的原始圖像：

在div中使用圖片創建邊框:

實例

在div中使用圖片創建邊框

div

{

border-image:url(border.png) 30 30 round;

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */

-o-border-image:url(border.png) 30 30 round; /* Opera */

}

新邊框屬性

屬性	說明	CSS
border-image	設置所有邊框圖像的速記屬性。	3
border-radius	一個用于設置所有四個邊框- *-半徑屬性的速記屬性	3
box-shadow	附加一個或多個下拉框的陰影	3

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：如何關閉Flash Cookie來避免信息泄露？
下一篇：Ktor - Kotlin Web 框架

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商