css給邊框添加圖像的方法是什么

這篇文章將為大家詳細(xì)講解有關(guān)css給邊框添加圖像的方法是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

css只要是通過設(shè)置border-image屬性或者其相關(guān)屬性就可以給元素的邊框添加圖像。

border-image屬性的簡(jiǎn)單介紹

在css中我們可以通過設(shè)置border-image屬性來定義邊框要使用的圖像，而不是使用border-style屬性給出給邊框樣式；并把圖像作為元素的附加背景層。

注：border-image屬性是一個(gè)簡(jiǎn)寫屬性，它可以分成：

border-image-source屬性，border-image-slice屬性，border-image-width屬性，border-image-outset屬性，和border-image-repeat屬性。

當(dāng)要在元素上設(shè)置圖像邊框時(shí)，border-image屬性將分幾個(gè)步驟來設(shè)置。

首先，使用border-image-slice屬性將border-image-source屬性中指定的圖像切成九個(gè)圖像，即四個(gè)角圖像，四個(gè)邊緣圖像和一個(gè)中間圖像：

邊框圖像切成九個(gè)圖像。每個(gè)圖像的大小由border-image-slice屬性給出的值確定。它們的大小不必相等。

然后，按照以下步驟對(duì)得到的九幅圖像進(jìn)行縮放、定位和拼接到其對(duì)應(yīng)的邊界圖像區(qū)域中：

1、根據(jù)使用border-image-width屬性指定的值縮放圖像。

頂部和底部邊緣圖像被垂直縮放以適應(yīng)相應(yīng)的指定寬度偏移。

右邊和左下角是垂直縮放的，以適應(yīng)相應(yīng)的指定右邊和左邊寬度偏移。

對(duì)角圖像進(jìn)行縮放以適應(yīng)它們所屬的邊緣上指定的寬度。

并且，中間圖像的寬度按與頂部圖像相同的因子縮放，除非該因子是零或無窮大，在這種情況下，底部的比例因子被替換，如果沒有，寬度就不被縮放。除非中間圖像的高度是零或無窮大，否則用與左圖像相同的因子來縮放中間圖像的高度，在這種情況下，替換右圖像的縮放因子，如果沒有，則不縮放高度。

2、根據(jù)使用border-image-repeat屬性指定的值來縮放圖像。

如果border-image-repeat屬性的第一個(gè)關(guān)鍵字是stretch，則拉伸頂部和底部邊緣圖像以及中間圖像以適應(yīng)邊框圖像區(qū)域的寬度。它們的高度沒有變化。

如果第一個(gè)關(guān)鍵字是round，則頂部、中部和底部的圖像在寬度上被調(diào)整大小，以便它們中的全部數(shù)量恰好適合于邊界圖像區(qū)域的中部。

如果第一個(gè)關(guān)鍵字是repeat或者space，則不再縮放頂部、中部和底部圖像，因此它們的高度將僅從上面的第一步縮放。

如果第二關(guān)鍵字是stretch，round，repeat，或space，則對(duì)相應(yīng)的左、中、右圖像應(yīng)用相同的縮放，從而影響圖像的高度；除了第一步，不縮放它們的寬度。

3、現(xiàn)在圖像被縮放，它們被定位。定位圖像也與border-image-repeat屬性有關(guān)。

如果第一個(gè)關(guān)鍵字是repeat，則頂部，中間和底部圖像在其各自的區(qū)域中水平居中。否則，圖像被放置在邊界圖像區(qū)域的各自部分的左邊緣。

如果第二個(gè)關(guān)鍵字是repeat，則左，中和右圖像在其各自的區(qū)域中垂直居中。否則，圖像被放置在邊界圖像區(qū)域的各自部分的頂部邊緣。

4、在縮放和定位圖像之后，根據(jù)border-image-repeat屬性的值，根據(jù)需要將它們平鋪（重復(fù)）多次，以填充它們各自的區(qū)域。

如果值是repeat，則重復(fù)圖像以盡可能多地填充它們各自的區(qū)域。如果值是space，則丟棄任何部分的平鋪，并且在平鋪之前、之后和之間分配額外的空間。

所有圖像都以與正常邊界相同的堆疊級(jí)別繪制：緊挨在背景圖層的前面；因此，邊框圖像將始終位于任何背景圖像的頂部。

我們可以使用border-image-outset屬性將邊界圖像擴(kuò)展到元素的邊界區(qū)域之外。

border-image屬性的使用

基本語法：

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

初始：none 100% / 1 / 0 stretch ,這是longhand屬性的初始值的串聯(lián)

適用于：所有元素，除了當(dāng)內(nèi)部表元素的border-collapse屬性的值為collapse時(shí)。

說明：

1、border-image-source：指定邊框要使用的圖像

例：

border-image-source: none; /* 沒有邊框圖像，使用`border-style`定義的邊框樣式` */
border-image-source: url(path/to/some-image.png);
border-image-source: linear-gradient(to bottom, #333333, #eeeeee); /* 線性漸變的圖像 */

2、border-image-slice：用于將要用作邊框圖像的圖像“切片”成九個(gè)部分：四個(gè)角，四個(gè)邊和一個(gè)中心部。

例如，以下圖像已被切成9個(gè)部分。頂部，右側(cè)，底部和左側(cè)偏移具有相等的124px值。

border-image-slice：124px;

3、border-image-width：用于縮放border-image-slice值創(chuàng)建的九個(gè)部分的邊框圖像切片。

4、border-image-outset：用于指定邊框圖像區(qū)域擴(kuò)展到元素邊框區(qū)域之外的量

5、border-image-repeat：指定用作邊界圖像的圖像的切片如何縮放和平鋪（重復(fù)）。

css使用border-image屬性設(shè)置圖像邊框的示例：

示例一：

需要用到圖片：

html代碼：

<div class="container">
  <div class="element element-1">
    <p><strong>php完全自學(xué)手冊(cè)</strong></p>
    <p>歡迎朋友們加入php自學(xué)的行列，php語言是一門入門簡(jiǎn)單，容易上手的通用開源腳本語言，《php完全自學(xué)手冊(cè)》能使學(xué)習(xí)者對(duì)php有一個(gè)大致的了解，并能通過該語言進(jìn)行簡(jiǎn)單的網(wǎng)站和軟件開發(fā)。</p>
  </div>
</div>

css代碼：

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  padding: 30px;
  margin: 30px auto;
}

.element-1 {
  background-color: white;
  /* fallback for browsers that don't support border images */
  border: 10px solid grey;
  -webkit-border-image: url(img/1.png) 20 / 30px / 0 repeat;
  -o-border-image: url(img/1.png) 20 / 30px / 0 repeat;
  border-image: url(img/1.png) 20 / 30px / 0 repeat;
}

效果圖：

示例二：

需要用到的圖片：

HTML代碼：

<div class="container">
  <div class="element element-2">
    <p><strong>Bootstrap 中文手冊(cè)</strong></p>
    <p>《Bootstrap開發(fā)手冊(cè)》是Bootstrap官方最新的在線參考手冊(cè)。Bootstrap是目前最受歡迎的前端框架，那在本Bootstrap文檔中，您將會(huì)學(xué)習(xí)使用Bootstrap快速創(chuàng)建一個(gè)響應(yīng)式（自適應(yīng)）web項(xiàng)目，此外，由于整個(gè)框架是基于模塊的，您可以通過您自己的 CSS 位，甚至是項(xiàng)目開始后的一個(gè)大整改，來進(jìn)行自定義。 Bootstrap視頻教程：http://www.php.cn/course/list/15.html</p>
  </div>
</div>

css代碼：

.element-2 {
  border: double orange 1em;
  -webkit-border-image: url(img/2.png) 27 round stretch;
  -o-border-image: url(img/2.png) 27 round stretch;
  border-image: url(img/2.png) 27 round stretch;
}

效果圖：

關(guān)于css給邊框添加圖像的方法是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。