-1

Fab.com は、二重の点線 (水平と垂直の両方) で素晴らしいデザインをしています。

「Featured today」という言葉の上に、横の点線の二重線の 1 つが表示されます。firebug を使用すると、 にあることがわかります。

fab.com はどのようにして css または image を使用してこの行を作成できますか? cssの場合、どの属性でそのような効果を生み出しますか?

4

4 に答える 4

2

それはイメージです：

#fabWrapper {
    background: url("//dnok91peocsw3.cloudfront.net/relaunch/bg-mesh-2px-gap.png") repeat scroll 0 0 #FFFFFF;
}

小さなドットがラッパー要素全体を埋めています。次に、ページ上の子要素がすべてを覆い隠しますが、それらの間にいくつかの小さな余白が残っており、点線の背景が表示されています。

于 2012-10-16T21:31:38.877 に答える
1

コンテナを//dnok91peocsw3.cloudfront.net/relaunch/bg-mesh-2px-gap.pngに設定しています。これは、コンテナの幅全体で2pxのパディングを繰り返します。次に、使用する各セクションで、背景を白に設定します。一部のセクションの削除を開始するか、それらのdivの1つをbackground：noneに設定すると、コンテナーが表示されます。

于 2012-10-16T21:37:31.010 に答える
1

要素を調べると、背景として設定された画像であることがわかります: http://dnok91peocsw3.cloudfront.net/relaunch/bg-mesh-2px-gap.png

CSSでそれをしたい場合は、「アウトラインとボーダー」を使用して、それらに点線の実線を付けることができます。または、2 つの div を使用して、border プロパティを指定します。

border:1px dotted #111;

于 2012-10-16T21:31:57.713 に答える
1

を使用して2つのdiv点線を使用してそれを作成できますcss

またはimage、a の bg で an を使用して、adivを実行できますrepeat-y。css

于 2012-10-16T21:32:33.743 に答える