divの異なるボーダー画像

Question

同じdivで2つの異なるボーダー画像を使用しようとしています.1つの画像が上部に沿って、下部に沿って1つ繰り返しました。

表示するボトムボーダー画像を取得できます。私はまた、上部に同じボーダーイメージリピートを得ることができますが、私はのborder-bottom-画像やボーダートップ画像を使用しようとすると、どちらも表示されます。

#mainImage{ 
    border-bottom:8px solid #fff; 
    border-bottom-image: url("http://local.vsjf.org/wp-content/themes/vsjf/images/vsjf_borders_sage_02.png") 7 repeat; 
    border-top:8px solid transparent; 
    border-top-image: url("http://local.vsjf.org/wp-content/themes/vsjf/images/vsjf_borders_white.png") 7 repeat; 
    border-left:0px; 
    border-right:0px; 
} 

これは可能ですか？

Answer 1

私はボーダー画像を使用したことはありませんでした。私は、ほとんどのCSSで使用されていないタグがいくつかあると思います。

私はあなたが望む結果を生み出すだろうと思う素晴らしい選択肢は、before：and：afterスタイルは、border-imageよりも柔軟性があります。要素を別々にしていますが、それらはデフォルトで相対的な要素の一部です。

#mainImage:before {background-image: url('/*url*/'); width: #px; height: #px; position: /*relative*/; content:''; } 
#mainImage:after {background-image: url('/*url*/'); width: #px; height: #px; position: /*relative*/; content:'';}