這篇文章我們來講一下在網(wǎng)站建設(shè)中，一篇文章帶你學(xué)習(xí)CSS3圖片邊框。本文對大家進(jìn)行網(wǎng)站開發(fā)設(shè)計工作或者學(xué)習(xí)都有一定幫助，下面讓我們進(jìn)入正文。

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

一、瀏覽器支持

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

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

二、CSS3 border-image 屬性

CSS3 border-image 屬性允許您指定要用來代替元素周圍的正常邊界的圖像。屬性有三個部分:

作為邊框的圖片。

在哪里分割圖像。

確定中間部分應(yīng)重復(fù)或延伸。

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

原理分析：

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

注意:

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

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

CSS代碼：

項目

在這里，圖像的中間部分被延伸來創(chuàng)建邊界.

這里是原始圖像:

代碼如下：

#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)建邊界：使用圖片作為邊框!

實例代碼：

#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;

}

三、總結(jié)

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

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

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

相關(guān)閱讀

總結(jié)

以上是生活随笔為你收集整理的css 科技 边框_一篇文章带你学习CSS3图片边框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。