border-image不會環繞整個邊框

如何獲取我用來環繞整個邊框的圖像？它只顯示在頂部和底部。我使用border-image.com將其縮小，但我只能在頂部或底部或左側和右側邊框上獲得所需的結果。我基本上希望圖像以一致的方式反覆環繞（公司的標誌在所有邊界重複），而不必以任何方式拉伸，操縱或縮放圖像。我真的很感激任何幫助？

Here's what I have so far border-image不會環繞整個邊框

HTML：

<div id="outer_container"> 
... 
</div>

CSS：

#outer_container { 
height: 1495px; 
width: 925px; 
margin-right: auto; 
margin-left: auto; 
background-repeat: repeat-x; 
background-attachment: fixed; 
background-color: #E7EAF5; 
border-radius: 15px; 
border-style: solid; 
border-width: 38px 38px 38px 38px; 
border-image: url(http://lorempixel.com/81/81/) 81 0 fill repeat stretch; 
}

來源

2014-02-28 user3361043

我現在明白了，border-image不會環繞整個邊框。有沒有其他方法可以完成我的任務？ – user3361043

可以使用的div來實現這一目標：

HTML：

<div id="div-top"></div> 
<div id="div-left"></div> 
<div id="container"> 
</div> 
<div id="div-right"></div> 
<div id="div-bottom"></div>

CSS：

#div-top, 
#div-bottom { 
    width: 925px; 
    height: 81px; 
    background: url('http://lorempixel.com/81/81/') repeat-x; 
    clear: both; 
} 

#div-left, 
#div-right { 
    width: 81px; 
    height: 1495px; 
    background: url('http://lorempixel.com/81/81/') repeat-y; 
} 

#div-left, 
#div-right, 
#container { 
    float: left; 
} 

#container { 
    height: 1495px; 
    width: 763px; 
    background-attachment: fixed; 
    background-color: #E7EAF5; 
}

小提琴：http://jsfiddle.net/6MghG/1/ （請注意，你需要擴大小提琴預覽框才能正常顯示;它應該在瀏覽器窗口中正常工作）。

這樣做的另一個優點是更寬的瀏覽器兼容性 - 例如，IE10不支持邊框圖像。

來源

2014-02-28 16:05:47 mayabelle

的問題是，你的81後加入0如果您刪除邊框將適用於所有邊界

border-image: url(http://lorempixel.com/81/81/) 40 fill repeat stretch;

http://jsfiddle.net/4rjw6/

來源

2014-02-28 16:06:25 fquirogam

的數量，您可能會發現更容易指定您的邊框的屬性一個接一個。我與你的小提琴嘗試這種在Chrome：http://jsfiddle.net/6MghG/2/

border-image-source:url(http://lorempixel.com/81/81/); /* where the image comes from */ 
border-image-slice: 33.3%; /* chop that image into 9 pieces each one-ninth the total area */ 
border-image-width: 50px; /* just how wide to draw the border. Overrides border-width. */ 
border-image-repeat: round; /* change the image size along the edges to make it fit neatly */

這看起來不錯給我。你必須選擇你想要使用的標誌，並把它的九個副本放在一個圖像中來使用這種技術。

來源

2014-02-28 16:39:33 emrys57

border-image不會環繞整個邊框

回答

相關問題