こんなことができるんだ!CSSのボーダーを破線や点線にするスタイルシートのテクニック

CSSのボーダーを破線や点線にするスタイルシートのテクニック・オンラインツールを紹介します。

ボーダーにborderを使用するのではなく、backgroundを細くして四辺に使用します。破線や点線の大きさや長さもカスタマイズでき、ボーダーを傾斜にしたり、フェードやアニメーションを与えることもできます。

CSSのボーダーを破線や点線にするスタイルシートのテクニック

More Control Over CSS Borders With background-image

CSSのボーダーを破線や点線にすることができます。
borderプロパティの値に、dasheddottedがあることを知っている人もいるでしょう。例えば、下記のように記述します。

ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。

しかし、いくつかのテクニックを使用することで、それが実現できます!
Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。

See the Pen
Dashed Border Generator
by Amit Sheen (@amitsheen)
on CodePen.

このテクニックのポイントは4つの背景(background)を使用することです。backgroundプロパティはカンマ区切りの値を取るため、4つの背景(上下左右に沿って1つずつ)を設定し、それらをボーダーのようにサイズ変更することで、borderプロパティの制約を解除することができます。

ジェネーターで自分好みのボーダーを簡単に作成できます。

こういうボーダーも実装できます。

sponsors

top of page

©2020 coliss