はてなブックマーク

この記事でお伝えしたいこと この記事は、cssで複数の線をつける方法についてです。 要素に複数の線をあてるのは非常に面倒ですが、こちらで紹介した方法を用いることで簡単に実現ができます。以下ではその方法を紹介したいと思います。 作り方 サンプル 作り方 box-shadowというプロパティを利用します。 box-shadowは要素に影をつけるためのプロパティです。1 borderやoutlineとは異なり、一つの要素に複数設定することができます。2 box-shadow:0 0 0 10px #c00,0 0 0 10px #cc0 inset box-shadowの三番目の数値はぼかし距離を設定する値です。これを0にすることで一切ぼやけない影、つまり、線の代わりになります。 ただし、注意点としてbox-shadowのデフォルトの設定では、widthの値の外側になってしまいます。それを防ぐた