style - html tag hr color




hr要素の色を変更する (17)

  1. コードの動作古いIEの場合
  2. 多くの色を試してみた

    <hr color="black">
    <hr color="blue">
    

私はCSSを使って私のhrタグの色を変えたいと思う。 私が以下で試したコードはうまくいきません:

hr {
  color: #123455;
}

CSSを使って異なる色の線を作ることができます。例は次のようになります:

border-left: 1px solid rgb(216, 216, 216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216, 216, 216);

そのコードは垂直の灰色の線を表示します。


ff、オペラ、すなわちクロムとサファリでテスト済み

hr{
  border-top: 1px solid red;
}

フィドルを見るhttp://jsfiddle.net/HPSjU/


<hr noshade>タグをつけて、あなたのcssファイルに移動して追加することができます:

hr {
    border-top:0;
    color: #123455;
}
<hr noshade />
This s a test
<hr noshade />


border-colorChromeSafariで動作します
background-colorはFirefoxとOperaで動作します
colorIE7 +で動作します


あなたはcssクラスを使用している場合、それはすべての 'hr'タグで取られますが、もしあなたが特定の 'hr'を使用したいのであれば、以下のコードを使用します。

<hr style="color:#99CC99" />

それがクロムで動作していない場合は、以下のコードを試してください:

<hr color="red" />

ここでのすべての解答を読み、説明された複雑さを見た後、私はHRを実験するための小さな転向を設定しました。 結論は、あなたが書いたモンキーなCSSのほとんどを捨てることができ、この小さなprimerを読んで、純粋なCSSのこれら2つのラインを使用することです。

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

それはあなたのHRをスタイルするために必要なすべてです。

  • クロスブラウザ、クロスデバイス、クロスオース、クロス・イングリッシュ・チャンネル、クロス・アーケード。
  • いいえ"これはうまくいくと思います...""Safari / IEを覚えておく必要があります..."など
  • 余分なCSSはありません - heightwidthbackground-colorcolorなどは含まれません。

防弾カラフルHRだけ。 これ簡単なTMです。

ボーナス:HRにある高さHを与えるには、 border-widthH/2ます。


それはシンプルで私の好きなものです。

<hr style="background-color: #dd3333" />

フォントの色を使って水平の規則を変更すると、より柔軟で使いやすいものになります。

colorプロパティはデフォルトで継承されていないため、カラー継承を可能にするには、hrに次のものを追加する必要があります。

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}
normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">


フォントタグも使用できます

<font color="red"><hr></font>

一部のブラウザではcolor属性が使用され、一部のブラウザではbackground-color属性が使用されます。 安全であるために:

hr{
    color: #color;
    background-color: #color;
}

私はIE、Firefox、Chromeで2015年5月にテストを行っています。これは現在のバージョンで最も効果的です。 それはHRを中心にし、それを70%幅にします:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}
<hr class="light" />


私はこれが最も効果的なアプローチだと信じています:

<hr style="border-top: 1px solid #ccc; background: transparent;">

または、すべてのhr要素でそれを行うことを好む場合は、これをあなたに書いてくださいCSS:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

私はコメントする評判がないので、私はここにいくつかのアイデアを与えるでしょう。

css変数の高さが必要な場合は、すべての罫線を外して背景色を指定します。

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

あなたが知っているだけのスタイルが必要な場合(例:ほとんどの電子メールクライアントの:: before要素の枠線を置き換える、または

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

両方の方法で、幅を設定すると、サイズは常にそれになります。

display:block;を設定する必要はありませんdisplay:block; このため。

完全に安全であるために、両方を混在させることができますheight:0px;一部のブラウザではheight:0px;が混乱する可能性がありますheight:0px;

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

この方法では、少なくとも2ピクセルの高さがあることを確認することができます。

それ以上のラインですが、安全は安全です。

これは、ほぼすべてのものと互換性を持たせるために使うべき方法です。

覚えておいてください:GmailはインラインCSSを検出するだけで、一部のメールクライアントは背景や枠線をサポートしていない場合があります。 1つでも失敗した場合でも、1ピクセルの線が残ります。 何もないよりマシ。

最悪の場合、 color:blue;を追加しようとすることができますcolor:blue;

最悪の場合、最悪の場合、 <font color="blue"></font>タグを使用して貴重な<hr/>タグを内部に入れてみることができます。 <font></font>タグの色を継承します。

この方法では、 <hr width="50" align="left"/>ようにしたいと考えます。

例:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

確認するためのリンクは次のとおりです: http://jsfiddle.net/sna2D/ : http://jsfiddle.net/sna2D/


hr
{
  background-color: #123455;
}

背景はあなたが変えようとするべきものです

また、境界線の色で作業することもできます。 私はそこにクロスブラウザーの問題があるとは思わない。 別のブラウザでテストする必要があります


hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

水平のルールを1pxの厚さに保ちながら色を変更します


hr
{
color: #f00;
background-color: #f00;
height: 5px;
}




css