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

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

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

border-image屬性的簡單介紹

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

注：border-image屬性是一個簡寫屬性，它可以分成：

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

當要在元素上設置圖像邊框時，border-image屬性將分幾個步驟來設置。

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

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

然后，按照以下步驟對得到的九幅圖像進行縮放、定位和拼接到其對應的邊界圖像區域中：

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

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

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

對角圖像進行縮放以適應它們所屬的邊緣上指定的寬度。

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

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

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

如果第一個關鍵字是round，則頂部、中部和底部的圖像在寬度上被調整大小，以便它們中的全部數量恰好適合于邊界圖像區域的中部。

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

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

3、現在圖像被縮放，它們被定位。定位圖像也與border-image-repeat屬性有關。

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

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

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

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

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

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

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屬性的初始值的串聯

適用于：所有元素，除了當內部表元素的border-collapse屬性的值為collapse時。

說明：

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：用于將要用作邊框圖像的圖像“切片”成九個部分：四個角，四個邊和一個中心部。

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

border-image-slice：124px;

3、border-image-width：用于縮放border-image-slice值創建的九個部分的邊框圖像切片。

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

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

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

示例一：

需要用到圖片：

html代碼：

<div class="container">
  <div class="element element-1">
    <p><strong>php完全自學手冊</strong></p>
    <p>歡迎朋友們加入php自學的行列，php語言是一門入門簡單，容易上手的通用開源腳本語言，《php完全自學手冊》能使學習者對php有一個大致的了解，并能通過該語言進行簡單的網站和軟件開發。</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 中文手冊</strong></p>
    <p>《Bootstrap開發手冊》是Bootstrap官方最新的在線參考手冊。Bootstrap是目前最受歡迎的前端框架，那在本Bootstrap文檔中，您將會學習使用Bootstrap快速創建一個響應式（自適應）web項目，此外，由于整個框架是基于模塊的，您可以通過您自己的 CSS 位，甚至是項目開始后的一個大整改，來進行自定義。 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;
}

效果圖：

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