divの各辺に異なるボーダー画像を設定できますか？

-1

私はborder-imageプロパティを使って絵フレームデザインでdivを作ろうとしています。
frame.jpg
左サイドフレームの画像です。どのように私はそれを右側に適用することができますか？divの各辺に異なるボーダー画像を設定できますか？

私はそれを処理するためにJavaScriptを使用して興味がない...
CSS3ソリューションください...

出典

2016-05-28 Ajay Dude

既に回答されている可能性があります。これを見てください（http://stackoverflow.com/questions/7948447/can-you-assign-an-image-to-border-right） – Simon

申し訳ありません。しかし、それは私の解決策ではありません –

あなたは既に左サイドで働いているのであれば、あなたのコードを見せてください。 – aardrian

あなたは、ブラウザを使用して、「すべての道の周りにこの画像とタイルそれを取る」だろうと仮定だと思うかもしれませんが間違っている。ボーダー画像はそれよりも汎用性があり、非常に異なる結果を得るために同じ画像をスライスしてダイスするあらゆる種類の方法を提供します。 CSS3のborder-imageプロパティが提供するイメージが直感的ではないという前提があります。まず、この記事を読んで、border-imageの個々のプロパティの優れた説明を得てください：CSS-Tricks: border-image。

.mydiv { 
 
    padding: 20px 38px; 
 
    border-image-source: url(http://i.stack.imgur.com/LR2X0.jpg); 
 
    border-image-width: auto; 
 
    border-image-repeat: repeat; 
 
}

<div class="mydiv"> 
 
    <h1> 
 
    Headline: Breaking News! 
 
    </h1> 
 
</div>

あなたがプロパティの感触を持ってまで、私は、各部分を個別に設定する（代わりのオムニバスショートハンドプロパティを使用してお勧めしたい - ボーダー幅、枠線のスタイル、および境界線を設定するように境界線を使用する代わりに-colorを使用します）。 this border-image generatorを試すこともできます。これは、ブラウザが画像をスライスしてダイスする方法を理解するための優れた方法です。

出典

2016-05-28 13:01:16

あなたは非常に答えに近いです..しかし、右側を参照してください。それはまだ左の..のように見えるそれの任意のソリューション？ –

ボーダージェネレータリンクをチェックアウトしましたか？画像がどのようにスライスされるかを示します。それをあなたが望むようにスライスするには（おそらく画像が反対側に反転されるように）、反転した画像を提供する必要があります。（あなたの左サイドと右サイドを同じイメージに並べておけば、このイメージを使用してそのイメージを使用することはできません。イメージソースの設定は1つだけです） –

ありがとう多くのママ。私はそれを見てみましょう.. –

divの各辺に異なるボーダー画像を設定できますか？

答えて

関連する問題