CSS3中的頂部邊框圖像

我已使用border，border-top-image,border-image而且似乎沒有任何事情可以完成我之後的操作。CSS3中的頂部邊框圖像

我有以下的CSS：

#footer { 
    overflow: hidden; 
    clear: both; 
    width: 100%; 
    margin: 0 auto; 
    padding: 26px 0 30px 0; 
    border-top-image: url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg'); 
    font-size: 0.8461538461538462em; 
    color: #aaa; 
}

這似乎並不適用於該網站，我努力工作，我已經試過了在Firefox和Chrome。

我只希望圖像出現在頂部邊框，並希望沒有其他的邊界（所以它有點像一個<hr />）

來源

2012-06-12 Dean

+13

你真的不需要在'字體size'那麼多的精度。 – thirtydot

是的，它的效果很好。 – Dean

@ thirtydot它是未來至今的年份6000 –

我不認爲有任何財產喜歡border-top-image給圖像邊界元素的任何一面 - 使用

border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30 round;

，但它給邊框四面八方。要刪除雙方圍繞我給的其餘邊界 -

border-bottom:0; 
border-left:0; 
border-right:0;

它的工作，這裏是我的小提琴 - http://jsfiddle.net/ashwyn/c7WxG/1/

來源

2012-06-12 12:19:58 Ashwin

謝謝，作品不錯。 – Dean

其實那個小提琴在Firefox 43上不起作用... –

它在Firefox上不起作用。我通過IonicFramework和Apache Cordova在iPad上運行它，但它也不起作用。它雖然在Chrome上工作。 – junerockwell

-3

邊框圖像被指定爲URI，爲兩個不同的組：的高達的URI可以爲四個邊界邊緣中的每一個指定三個圖像。如果給出一個圖像URI，則第一個圖塊以邊界線爲中心。如果給出兩個圖像URI，它們在邊界線的中心會合，中心的頂部或左側放置第一個圖像。如果給出三個圖像URI，則第二個將成爲中心並且不平鋪。另外兩個放置在中心圖像的任一側，第一個位於中心的頂部或左側，第三個位於底部或右側。

欲瞭解更多請參考W3.org網站

來源

2012-06-12 12:24:46 xan

這是答案嗎？ – Ashwin

這是一個......奇怪的方式來回應MotaBOS的評論，Ecko。不要這樣做。如果您有代表，請在評論中發佈回覆。 –

我沒有以任何消極的方式回覆它。我指的是上述關於邊界問題的答案。 – xan

還有就是border-image-width: a b c d;財產。細節：

a-d是頂部，右，下和左邊框的寬度，分別爲廣告
值可能的形式：
- [x]px
- [x] - 邊界的倍數寬度值
- [x]% - 圖像切片的百分比（在Safari 7中不顯示）
- auto - 從相應圖像切片的寬度導出
默認值爲1。如果省略d的b值用於左邊框
寬度
如果還省略c，也用於底邊框的a的值幅
如果還省略b，則的a值用於所有邊界:)

因此，對於你例如，你可以使用：

border-image-width: 100% 0 0 0;

替代地，border-image簡寫屬性包括border-image-width作爲參數，所以在CSS中的一個行：

border-image: url(image.png) 100% 0 0 0/[desired_border_width]px 0 0 0 repeat;

這使用整個圖像的頂部切片（「100％0 0 0」），並將其應用於作爲頂部邊框在所需的寬度。

來源

2014-05-24 00:46:05

border-image-width：100％0 0 0;我正在尋找的機器人。 – hawkeye126

另一種解決方案 - 創建可視「之前」 phseudo元素：

.yourDiv::before{ 
    background:url("http://lorempixel.com/200/100/"); 
    width:100%; 
    height:20px; 
}

來源

2015-05-23 20:08:54

你說得對，這個解決方案比較好，謝謝你的分享。 –

CSS3中的頂部邊框圖像

回答

相關問題