CSSボーダーエフェクト

このエフェクトをCSSでのみ実現できるかどうかは疑問です。もしあなたがちょっとズームインすれば、画像には4つの罫線があることにお気づきでしょう（その底の影なしで、私はそれを使用したくありません）。CSSボーダーエフェクト

img http://img265.imageshack.us/img265/192/version203.jpg

2011-11-08 agis

最も外側の境界線は既に簡単な境界効果とCSSを使用して行われることが表示されます。最も外側のボーダーは、ボーダーと画像を内側に押し込むためのパディングがあるボックスです。次に、灰色のボックスに移動して、border: 3px doubleの境界線の色が背景色と同じで、背景がダブルボーダーの間の白線を覆わないようにbackground-clip: padding-boxを追加するので、別のボックスを使用することができます。また、周囲に白い枠線がある実際のイメージに達するまでは、そのボックスに3pxの境界線があり、いくつかのパディングがあるように見えます。

CSSの簡単な例：

span.imgbox { 
    background: #CCC; 
    background-clip: padding-box; 
    border: 3px double #CCC; 
    border-radius: 3px; 
    display: inline-block; 
    padding: 10px; 
} 
span.imgbox > img { 
    border: 1px solid #FFF; 
}

これは、一般的に関与されるもので、実際のウェブサイトの図に示すように、あなたが黒の境界線と白い箱を望んでいないと仮定すると、ちょうどイメージ自体に表示される必要な境界線。

出典

2011-11-08 17:03:42 animuson

ありがとう！その下の影をCSSで追加することは可能ですか？ – agis

@Alecs：私は、CSSがそれほど奇妙な影をしているとは思っていません。少なくとも、影と光で見たすべての例からです。 – animuson

ああ、かなり悪い、私はバックグラウンドからのユーザーによってイメージの幅が設定されているので、私はそれが動作しないと思うので、バックグラウンドイメージとして使用するとその効果を追加することができますか？画像の幅ごとに効果が出るようになりました... – agis

ボックスシャドウでは、複数の罫線をエミュレートできます。これは、あなたが探している正確に何である：

http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/

出典

2011-11-08 17:05:15 FRAGA

これは私の解決策よりもはるかに簡単です... – rlemon

'border-radius'がボックスシャドウの* all *に当てはまるので、彼はまだ2つの要素を必要とします。この例では、丸められた境界線の1つのみが必要です。 – animuson

あなたはボックスシャドウ、アウトライン、ボーダー、パディング/背景色を混ぜることができ...しかし、これは、クロスブラウザではないでしょう。..

demo

border: 4px solid #000; 
outline: 4px solid #f00; 
background-color: #ff0; 
padding: 10px; 
box-shadow: 0px 0px 0px 4px #333;

は、私が唯一の方法は、ネストされた要素を持つことだと思います。

出典

2011-11-08 17:06:38 rlemon

答えて

関連する問題