2011-02-05 11 views
25

スタイリング私は私の<hr />(時間)の要素がかったをしようとしていますが、このために、以下のCSSルールを使用しています:<hr />要素

hr {height: 1px; color: #ed1d61;background-color: #ed1d61; 
} 

をしかし、それを通じて示す黒い線が依然として存在しています。

(ここでは、私が作っていますサイト上でそれを見ている:。?http://www.yemon.org/、デザインでその唯一の水平線を、私はラインの均一なピンクを取得するにはどうすればよい

+0

'hr'は' border'プロパティに最高のリッスンします。 –

+4

geocitiesが店を閉鎖したとき、私はhrが非難されたと思った。 – Chris

+1

答えを確認してください:http://stackoverflow.com/a/6382036/937891この質問の可能な重複については、 – Sathvik

答えて

38

変更して:あなたのページを見て

hr { 
    height: 1px; 
    color: #ed1d61; 
    background: #ed1d61; 
    font-size: 0; 
    border: 0; 
} 
6

設定してみてください境界線の色のプロパティ:ボーダーカラー:#ed1d61は、

5

hr要素は、境界線のように、単純な境界線を作っている:なし、あなたは過剰を取り除くでしょうその後

あなたは、単に上でプレイしているあなた。あなたが望むほど厚くするための高さ。これに

12

、私はこれが最善の見えると思います:

hr {height: 2px; 
    background-color: #ed1d61; 
    border:none 
} 

デモがhereです。

2

これを試してみてください:

.hr { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image:  -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    background-image:  -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0)); 
    margin: 25px; 
} 
-1

hr{ 
 
    background-color: #ed1d61; 
 
    border-width: 0; 
 
    /*change your size in this place*/ 
 
    padding-top: 1px; 
 
}
<hr/> 
 
sadf

関連する問題