7

太さの異なる 2 つの線とその間に 1px のスペースがある、タイトルの下部にダブル ボーダーを作成したいと考えています。具体的には、太さ 2px の上部の線と 1px の下部の線です。

これは、私が審美的に達成しようとしていることのイメージ例です -

ここに画像の説明を入力

このデザインの側面を使用している他の Web サイト - http://www.rollingstone.com/

これまでのところ、「border-bottom: 1px Solid #000;」を試しました。運がない。さらに提案をいただければ幸いです

どうもありがとう

4

9 に答える 9

14

追加のマークアップを必要としないため、このようなことができます。

http://jsfiddle.net/aNc9X/

ここに画像の説明を入力

ここに見られるように：http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/borders.html

于 2012-06-24T16:31:58.707 に答える
2

2つの問題：

  1. doubleではなく指定する必要がありますsolid。
  2. 3pxではなく指定する必要があります1px。（二重の境界線とそれらの間のギャップを表示するには、1ピクセルでは不十分です）

最終的なコードは次のようになります。

border-bottom: 3px double #000;

参照：http：//jsfiddle.net/qRUwk/

ただし、標準のCSSでは、2つの境界線を異なる太さで表示することはできません。そのためには、追加のマークアップが必要です。before:とafter:スタイルでそれを行うことができるハックがありますが、それらは非常に複雑になります。

于 2012-06-24T16:19:28.653 に答える
1

div と border-bottom を使用してこれらのキー ラインを作成してみてください。これを確認してください。

http://jsfiddle.net/R2puF/

.divA{
  height: 1px;
  border-bottom: 2px solid black;
}
.divB{
  height: 1px;
  border-bottom: 1px solid black;
}​

次に、HTML：

<h1>Title Here</h1>
<div class="divA"></div>
<div class="divB"></div>​
于 2012-06-24T16:13:49.783 に答える
1

この CSSを試してください

.title{
    font-size:35px;
    font-weight:bold;
    border-bottom:1px solid #000;
}
.title span{
    margin-bottom:4px;
    display:block;
    border-bottom:5px solid #000;
}

HTML

<div class='title'>
    Title Here
<span class='border'></span>
<div>​

デモ。

于 2012-06-24T16:31:12.990 に答える
0

RollingStone.comで使用される背景画像を使用するソリューションは次のとおりです

h1{font-size:40px;}
h1 span{
    background: transparent url(http://assets.rollingstone.com/images/fe/layout/oxfordLine.gif) scroll repeat-x bottom left;
    padding: 0 0 8px;
}​

必要に応じてパディングを調整します。

ライブデモ： http： //jsfiddle.net/martinschaer/aQq96/

于 2012-06-24T16:20:53.150 に答える
0

@Spudley - ボーダーの「ダブル」値を認識していませんでした。これは便利ですが、上の線が太くなりません。

マーティンの答えは、余分な div を使用しないため、私の最初の答え (現在編集済み) よりも優れていますが、そのような画像を使用しなくても彼の手法を使用できます (これはマーティンのフィドルからの修正コードです):

<h1><span>Hello World!</span></h1>​

h1 {font-size: 40px;
border-bottom: solid 2px black;
display: inline-block;}

h1 span{
border-bottom:solid 1px black;
padding: 3px;
}​

ここでjsfiddle

ちなみに、ローリングストーンのサイトでは実際のcssではなく、主に二重罫線の画像を使用しています。ご存知だと思いますが、Web ブラウザーから右クリックして [要素の検査] を選択すると、サイトがどのように構築されているかを調べることができます。学ぶための最良の方法！

于 2012-06-24T16:18:57.223 に答える