イメージを使用しないCSS3の行

私の個人的なウェブサイトのレイアウトを設計しました。私はセパレータとしてラインを設計しました。レイアウトでは、私は2つの行を並べて作った。 1つは暗く、もう1つは白ですので、CSS3を使用してコードを作成して、イメージを含めずに作成したい素晴らしい効果を作りました。イメージを使用しないCSS3の行

私が話している行を見るために2つのイメージを添付しました。お時間の男性のための

おかげで多くのことを。

乾杯！

2012-04-18 Ryan P.

だから、疑問でしたか？ – Edu

CSS3を使ってその行をどのように作成できますか？私はまったく同じように見たい。私は見当もつかない。 –

どのライン？上のイメージは水平線を持ち、下のイメージは垂直線を持ちます。 – j08691

は、それはあなたがスクリーンショットから意味を正確に知るためには非常に難しい

div { 
    width:50px; 
    border-right:1px solid black; 
    box-shadow: rgba(255,255,255,0.8) 1px 0px 0px; 
}

2012-04-18 20:29:36

これはまさに私が欲しいものです。ありがとう@ @benoît –

あなたの要素が横並びになっている場合は、白い（またはrgba）と境界線の右：黒色の要素が並んでいれば、もっと良いことができますか... –

を試してみてください - 私は光沢のある円を想定して、あなたが私たちを表示したいビットをハイライト表示するあなたの方法ですが、実際に彼らはそれが難しくとにかく助けにならない、非常に低解像度です。しかし、私はとにかく助けようとします。

あなたが求めているのはかなり一般的です。通常、この種のものにはCSSの枠線を使用します。このような

何か：

border-left: 2px groove black; height: 50px; width: 2px;

これは、すべての標準的なCSSです。 CSS3のトリッキーは必要ありません。

2012-04-18 20:31:10 Spudley

[CSS3も標準です！]（http://stackoverflow.com/a/8637917/106224）:(もちろん、ファイナライズされ、広くサポートされている標準を参照していることを知っています...） – BoltClock

私は少し異なったアプローチをしています。この前の記事を参照してください。 Two color borders

ここではあなたのための例です：http://dabblet.com/gist/2416433

2012-04-18 20:42:57 chicagoing

おかげさまで@chicagoing。役に立つリンク。ありがとう再び。 –

答えて