CSSでdashedとは違う破線をつくる方法 - Qiita

はじめに いままで画像で対応していたことが実は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