はじめに
いままで画像で対応していたことが実はCSSで再現できると知ったとき少しうれしいですよね。
今回は最近知ったことを1つ。
ボーダーの破線
普段、borderを破線にしたい場合、border-styleはdashedを指定するかと思います。
See the Pen vYEGbxv by Shinji (@Shinji_Shinji) on CodePen.
dashedは線の太さは指定できるけど、線の長さや線と線の間隔が設定できず
デザインによってはdashedが使えないということがありました。
その際、自分の場合はいままで画像で対応していました。
もし、
CSSで線の長さや間隔が自由に設定できたらいいですね。
解決方法
グラデーションを使って破線を作ります。
例えば、
線の幅が「5px」、間隔が「5px」の破線を作る場合
See the Pen dyPMmyx by Shinji (@Shinji_Shinji) on CodePen.
これで完成です。
