css怎么給邊框添加圖像

這篇文章主要為大家展示了“css怎么給邊框添加圖像”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css怎么給邊框添加圖像”這篇文章吧。

　　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'>

　　初始：none100%/1/0stretch,這是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(tobottom,#333333,#eeeeee);/*線性漸變的圖像*/

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

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

　　border-image-slice：124px;

以上是“css怎么給邊框添加圖像”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！