2019年07月1日(月)

hrの使いやすそうなスタイリングいろいろ

• 0
• 0
• 35
• 80

Result

See the Pen bPLrqX by kachibito
(@kachibito) on CodePen.

いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています

css

.hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%; } .hr_d {/*両端フェードアウト*/ border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #666, #f0f0f0); background-image: linear-gradient(left, #f0f0f0, #666, #f0f0f0); } .hr_e {/*縦ストライプ*/ border: 0; ...