CSSを使用してhrタグの厚さを変更するにはどうすればよいですか？

How Change Thickness Hr Tags Using Css

CSSを使用してhrタグの厚さを変更するにはどうすればよいですか？次の記事では、CSSを使用してhrタグの厚さを変更する方法を紹介します。これがお役に立てば幸いです。

HTML

タグは、HTMLページに水平線を作成します。水平ルール（水平ルール）は、ドキュメントを視覚的にパーツに分割できます。

ラベルの厚さは、CSSのheightプロパティを使用して設定できます。これは、使用可能な最小単位が1ピクセルであるため、最小の高さを1pxにすることができます。 CSSプロパティを使用してを設定することもできますラベルのスタイルにより、hrラベルの外観がより美しくなります。

例1：CSSのheightプロパティを使用して

を設定しますラベルの厚さ

 div { width: 300px } h1, h3 { color: green } hr { position: relative top: 20px border: none height: 12px background: black margin-bottom: 50px } Test the text! The top of the horizontal line. 
 
 Test the text! The lower end of the horizontal line.

レンダリング：！ [ここに画像の説明を挿入]（https：//imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS8zMjAvMjM2LzExMC8xNTYxODAwODE4ODM0ODk5LnBuZw?x

例2：CSSプロパティを使用して設定

ラベルスタイル

 div { width: 200px } body { background-color: #f0f0f0 width: 80px float: center } hr.class-1 { border-top: 10px solid #8c8b8b } hr.class-2 { border-top: 3px double #8c8b8b } hr.class-3 { border-top: 1px dashed #8c8b8b } hr.class-4 { border-top: 1px dotted #8c8b8b } hr.class-5 { background-color: #fff border-top: 2px dashed #8c8b8b } hr.class-6 { background-color: #fff border-top: 5px dotted #8c8b8b } 
'class-1' /> 
 
'class-2' /> 
 
'class-3' /> 
 
'class-4' /> 
 
'class-5' /> 
 
'class-6' />