2

以下に示すように、corel-draw で自分で作成した 2 つの png 画像があります。1 つは水平、もう 1 つは垂直です。

私はcssでこのようなことをしたい

.desiredSpan{
    border-top-image:horizontal.png
    border-bottom-image:horizontal.png
    border-left-image:vertical.png
    border-right-image:vertical.png
}

border-image プロパティを見てきましたが、縦と横の境界線に同じ画像を使用しています。それが私の問題を解決できるなら、私はそれを使ってもかまいませんが。

ここに画像の説明を入力

垂直

4

3 に答える 3

1

CSSボーダーに関するすべてがここに

しかし、IE では動作しないと思います。互換性については、こちらをご覧ください。

http://caniuse.com/#search=border

于 2013-01-27T15:47:40.520 に答える
1

まず、border-image が Internet Explorer でサポートされていないことに注意してください: http://caniuse.com/#search=border-image

第二に、border-image は 1 つの画像でのみ使用できます (したがって、それらを組み合わせる必要があります。ここでそれを行いました: http://i.imgur.com/gP414jh.png

第 3 に、現時点では、「border-image」ディレクティブのみが Chrome と Firefox でサポートされています。「border-top-image」などはサポートされていません。

第 4 に、例で使用する CSS は次のとおりです。

.bordered {
    width: 500px; // or what you want. 500px is the image width
    border-width: 20px;
    border-image: url(http://i.imgur.com/gP414jh.png) 20 stretch;
}

最後に、border-image の処理方法を確認するために作成した例を次に示します: http://codepen.io/ByScripts/pen/zHitp

于 2013-01-27T16:06:36.353 に答える
1

CSS3 にはこれらすべてのセレクターがあります。

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

http://www.css3.info/preview/border-image/経由

于 2013-01-27T15:41:44.797 に答える