webmanab.html

menu

ひとつの要素で簡単にボーダーを擬似的に複数指定する方法 -『CSS』

　

ボーダーを複数指定するプロパティは今のところ策定されていません。
要素を複製作成するなどして擬似的にボーダーを複数表示するハックが一般的かもしれませんが、box-shadowプロパティを使うことで１つの要素でこの要件を実現することができます。

box-shadowの拡散半径

box-shadowプロパティを多用して影として要素を表示することができますが、
このbox-shadowの４つ目のパラメータの拡散半径をうまく指定することで、ボーダーの表現ができます。

正の値では影が広がり、負の値では影が狭まる挙動になります。
オフセットとぼかしを0にして、拡散半径に正の値を指定しましょう。
これを複数続けて指定することで影がボーダーのように見える表示になります。

css


.item {
  box-shadow: 0 0 0 10px rgba(0,0,0,.5),
              0 0 0 20px rgba(0,0,0,.5),
              0 0 0 50px rgba(0,0,0,.5);
              // X軸, Y軸, ぼかし, 拡散半径, 色
}

bos-shadowはレイアウトに影響を与えない

box-shadowプロパティはレイアウトに影響を与えないので、ボーダーのように要素の大きさとしてはボックスモデルに認識されません。
box-sizingも無視して要素の外側に表示されます。
マウス操作もこの擬似ボーダーの上では発生しないため、これを解決するために、要素の大きさをハックするには、
paddingで内側にinsetパラメータで内側に影を指定することで、調整することが必要です。

おわります。

ひとつの要素で簡単にボーダーを擬似的に複数指定する方法 -『CSS』

share
ー

tag
ー

related
ー

tip