<hr>タグの太さを変更するにはどうすればよいですか

<hr>CSSで横罫線（）の太さを変更したい。私はそれがHTMLのようにできることを知っています-

<hr size="10">

しかし、こちらのMDNで言及されているように、これは非推奨であると聞いています。CSSで使用してみましたheight:1pxが、厚みは変わりません。<hr>線を0.5px太くしたい。

UbuntuでFirefox 3.6.11を使用しています

一貫性を保つため、境界線を削除し、高さを<hr>厚さに使用します。背景色を追加する<hr>と、指定した高さと色でスタイルが決まります。

スタイルシートで：

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

またはあなたがそれを持っているようにインライン：

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

ここでより長い説明

ブラウザでのサブピクセルレンダリング

サブピクセルレンダリングはトリッキーです。実際には、モニターが1ピクセル未満の細い線を表示することは期待できません。しかし、サブピクセルの寸法を提供することは可能です。ブラウザに応じて、これらのレンダリングは異なります。これについては、このJohn Resigのブログ投稿を確認してください。

基本的に、モニターがLCDで垂直線を描画している場合、1/3ピクセルの線を簡単に描画できます。背景が白の場合、線の色をにし#f0fます。目には、この線はピクセル幅の1/3になります。一部の色になりますが、モニターを拡大すると、ピクセル全体（RGBで構成されている）の1つのセグメントのみが暗くなります。これは、ClearTypeなどの細かいタイプのヒントに使用されるほとんどのテクニックです。

ただし、水平線はピクセル全体の高さしかありません。それがLCDモニターの技術上の制限です。CRTは三角形の蛍光体でさらに複雑になりました（アパーチャグリルタイプ、つまりソニートリニトロンでない限り）が、それは別の話です。

基本的にサブピクセルの寸法を提供し、それがそのようにレンダリングされることを期待することは、整数変数が1.2034759349の数を格納することを期待することと同じです。これが不可能であることを理解している場合は、モニターがサブピクセルの寸法をレンダリングできないことを理解する必要があります。

クロスブラウザセーフスタイル

しかし、通常、水平方向のルールが調和する方法は、色を使用して行われます。たとえば、背景が白（#fff）の場合は、常にHR 非常に明るくすることができます。のように#eee。

非常に軽い水平方向のルールに対応するクロスブラウザーセーフスタイルは次のとおりです。

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

インラインスタイルの代わりにCSSファイルを使用します。特定の要素だけでなく、サイト全体の中心的な定義を提供します。メンテナンス性が大幅に向上します。

分離されたCSSの負荷全体が最速または最短のソリューションではないため、1pxの線を描画するための最短の方法を探していました。

HTML5までは、1px hrの短い方法でした：<hr noshade> ... <hr>のnoshade属性は、HTML5ではサポートされていません。代わりにCSSを使用してください。（サイズ、幅、配置など、以前に使用された他の属性も）...

さて、これはかなりトリッキーですが、最も単純な1px時間が必要な場合はうまく機能します：

バリエーション1、BLACK hr：（黒に最適なソリューション）

<hr style="border-bottom: 0px">

出力：FF、Opera-黒/ Safari-濃い灰色

バリエーション2、灰色の時間（最短！）：

<hr style="border-top: 0px">

出力：Opera-ダークグレー/ FF-グレー/ Safari-ライトグレー

<hr style="border: none; border-bottom: 1px solid red;">

出力：Opera / FF / Safari：1px赤。

自分HR自身を0px高く設定し、代わりに境界線を表示することをお勧めします。ズームインまたはズームアウトすると（Ctrl +マウスホイール）、HRそれ自体の厚さが変化しますが、境界線を設定すると、常に同じままです。

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

高さ属性はhtml 5で廃止されました。私が行うことは、hrの周囲に境界線を作成し、境界線の太さを次のように増やすことです。hr style = "border：solid 2px black;"

線に不透明度を追加したので、細く見えます。

<hr style="opacity: 0.25">

<hr>タグのスタイリングの最高の成果は次のとおりだと思います。

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

HTMLコードの場合は、次のコードを追加するだけです<hr>。

これは、境界線やマージンのない1ピクセルの黒い線の解決策です

hr {background-color:black; border:none; height:1px; margin:0px;}

• Google Chromeでテスト済み

他の回答に含まれていないため、これを追加すると思いましたmargin:0px;。

• デモ

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

私は建設を使用することをお勧めします

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>