CSSとの境界線を用いた境界SVG

あなたがスタッキングから得ることができるものよりも涼しいボーダーが欲しかったことがありますかborder 元素?さて、今日は私はあなたを介して歩いて行くborder-image CSSプロパティ.
ここでは、我々は境界にチョップするつもりです

ダウンロードHere あなたが沿って続くならば.
これは同様にラスターイメージで動作しますが、スケーリング問題によりSVGを使用するのが最善です.

ボーダーイメージ

最低限を設定する必要がありますborder これは、ブラウザのサポートはPretty Good ) とborder-image プロパティ.

.border{
    border:20px solid;
    border-image:url(border.svg);
}

明らかに、面白いが、これは意図された結果ではないので、我々はいくつかのより多くのステップを持っています.

ボーダーイメージスライス

The border-image-slice プロパティは、別のエッジを作成するイメージをカットするブラウザに指示します.それは最大4つのunitless数、またはパーセンテージを受け入れる.
値は、画像の上部、右下、および左端から測定します.ユニットのいずれかが不足している場合、それは反対側を反映します.

// These are all the same.
border-image-slice: 0 40;
border-image-slice: 0 40 0 40;
border-image-slice: 0 40 0;

それで、私たちの例に戻って、私たちが使っているイメージがsymetricalであるので、それはスライスするのを簡単にします:

.border{
    ...
    border-image-slice:170;
}

タダ!あなたはカスタムイメージの境界線を持っている.夫婦が二人いるborder-image 境界がどのようにスケーリングと他のものに反応するかに影響することができる特性.チェックアウトarticle from CSS-Tricks これはすべてについてもう少し詳細になります.

ユースケース

誰も彼らの境界線にぎこちない線を望んでいません、しかし、これは私が境界イメージについて知ったとき、私が働いていたものです.

フレームとチョークは、境界を構成しているSVGイメージの一部です.これにより、コンテナーは、レイアウトやサイズを問わず、黒板の外観を保持できます.

あなたは、あなた自身がこれをこれまで使っているのを見ますか？なぜ理由か？