hrタグ(水平線)の色を変えつつ他は限りなくデフォルトの状態にする
CSSって弄り始めると、ついつい「あ、じゃぁここもついでにやっちゃお！」と思っちゃって
あっという間に時間が経っちゃいますよね💦
ということで先日に引き続き、このブログのデザインを弄っていました。
h2見出しタグにメインカラーの下線を付けてh3見出しタグと差別化したので、
hrタグ(水平線)の色もメインカラーにしようと思ったのですがうまく行かず……
なんかいろんなこと書いてるサイトがあって混乱したのですが、最終的に以下で、
「限りなくデフォルトに違いけど色だけ変える」が実現できたかな、と思うのでメモっておきます。
hr { display: block; width: 100%; height: 1px; background-color: rgba(80,181,181,0.8); border: 0; /*デフォルトデザインでは線がある場合があるので、消しておく。*/ box-shadow: 0px 1px 1px 0px rgba(80,181,181,0.4); }
↓こんな感じ
↑こんな感じ
参考
