一篇文章帶你學(xué)習(xí)CSS3圖片邊框

發(fā)布時(shí)間：2020-11-04 14:13:08 作者：天善智能

我要評(píng)論

這篇文章主要介紹了一篇文章帶你學(xué)習(xí)CSS3圖片邊框,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

使用CSS3 border-image 屬性，你可以在元素的周?chē)O(shè)置圖片邊框。

一、瀏覽器支持

表中的數(shù)字指定完全支持該屬性的第一個(gè)瀏覽器版本。

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

二、CSS3 border-image 屬性

CSS3 border-image 屬性允許您指定要用來(lái)代替元素周?chē)恼＿吔绲膱D像。屬性有三個(gè)部分:

作為邊框的圖片。
在哪里分割圖像。
確定中間部分應(yīng)重復(fù)或延伸。

以下面的圖像(叫做 "border.png")為例：

原理分析：

border-image 性將圖像分割成九個(gè)部分，就像一個(gè)井字游戲板。然后將角放在拐角處，中間部分按指定的順序重復(fù)或拉伸。

注意:

讓border-image 正常工作, 元素也需要設(shè)置邊框?qū)傩?

1. 圖像的中間部分重復(fù)創(chuàng)建邊界，圖片作為邊框

CSS代碼：

<!DOCTYPE CSS>

<CSS lang="en">

<head>

  <meta charset="UTF-8">

  <title>項(xiàng)目</title>

</head>

<body>

  <p id="borderimg">在這里，圖像的中間部分被延伸來(lái)創(chuàng)建邊界.</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. 圖像的中間部分延伸到創(chuàng)建邊界：使用圖片作為邊框!

實(shí)例代碼：

#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 的縮寫(xiě).

1. 不同的切片值

不同的切片值完全改變邊框的樣子：

實(shí)例 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;

}

實(shí)例 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;

}

實(shí)例 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;

}

三、總結(jié)

本文基于CSS基礎(chǔ)，使用CSS語(yǔ)言，介紹了有關(guān)CSS定義圖片邊框的知識(shí)點(diǎn)，從基礎(chǔ)的屬性概念入手，border-image的用法，在實(shí)際應(yīng)用中需要注意的問(wèn)題，做了詳細(xì)的講解。通過(guò)一個(gè)個(gè)實(shí)例的演示。希望幫助你更好的學(xué)習(xí)CSS。

想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲(chóng)與數(shù)據(jù)挖掘知識(shí)，可前往專業(yè)網(wǎng)站： http://pdcfighting.com/

到此這篇關(guān)于一篇文章帶你學(xué)習(xí)CSS3圖片邊框的文章就介紹到這了,更多相關(guān)CSS3圖片邊框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！