CSSシークレット ―47のテクニックでCSSを自在に操る

すると図 2.63 の よ う な 表 示 を得 ら れま す。こ の テ ク ニッ ク は、

marchingantsborder だけでなくさまざまな種類の破線のボーダーに 適

用できます。破線の色や、点の間隔を変えてみましょう。

border‐imageを使 っ て 同 等 の 効 果 を 得 る に は 、 現 状 の 仕様 で は

border‐image‐sourceに対してアニメーション GIF を指定する以外に

は方法がありません（chrisdanford.com/blog/2014/04/28/marching‐

ants‐animated‐selection‐rectangle‐in‐css）。ブラウザがグラデー

ションの補間に対応するようになったら、グラデーションも実現方法の選

択肢に加わるでしょう。ただし、コードは乱雑で WET なものになると思

われます。

▶ PLAY!

play.csssecrets.io/marching‐ants

しかし、依然として border‐imageはとても強力で、グラデーション

と組み合わせても大きな効果を発揮します。例えば、脚注などでは上辺に

途中までのボーダーが よ く表 示 さ れま す。 ここ で 必 要に な る のは 、

border‐imageと 横 方 向 の グ ラ デーシ ョ ン だ け で す。 表 示 さ れ る

ボーダーの長さはハードコードされます。ボーダーの幅は、その名のとお

りborder‐widthを通じて指定します ...