2013-04-04 67 views
2

我這樣做與CSS: enter image description hereCSS邊框圖像 - 關鍵

但我想我的客戶改變圖像幀。在我的圖像中,當前幀只是一種顏色(#000)。但框架可以是裝飾性的。所以客戶應該使用裝飾圖像進行取景。我見過W3Schools' border-image property lesson

的語法是:

border-image: source slice width outset repeat; 

但是,使用像我更不知道如何做到這一點的下面的圖像。

enter image description here

  • 我不明白:語法是如何爲動態的邊界圖像的尺寸(寬高)?

回答

2

border-image屬性是CSS3中引入的一個屬性,用於在CSS邊框上使用圖像。

CSS border-image屬性是一個簡寫屬性,用於在一個位置設置多個「邊框圖像」相關屬性。換句話說,border-image屬性是將圖像添加到邊界的有效方法。

div{-webkit-border-image: url(/properties/border-image-1.png) 30 30 round;-moz-border-image: url(/properties/border-image-1.png) 30 30 round;-ms-border-image: url(/properties/border-image-1.png) 30 30 round;-o-border-image: url(/properties/border-image-1.png) 30 30 round;border-image: url(/properties/border-image-1.png) 30 30 round;} 

此鏈接可能對您有幫助。

http://css-tricks.com/understanding-border-image/

祝您好運:);

2

我發現了一個邊框圖像生成器,它顯示了當您移動條時x和y值如何變化。 這裏的鏈接:

http://border-image.com/

希望這有助於...