0

こんなデザインの箱もあります

imgur.com/vMN0T.gif

基本的には、内容に応じて高さ方向と幅方向に任意のサイズになるようにコーディングする必要があります。さらに、背景色が変わる可能性があるため、影の効果は透明である必要があります。

すべてのブラウザで動作するようにこれを行う最善の方法は? (IE6+、FF、Opera、Safari、Chrome)

4

4 に答える 4

0

IE6の要件がない場合は、非常にクリーンで軽量なjQueryコーナーを使用できます：http：//jquery.malsup.com/corner/

IE6でこの効果を実現するには、半透明のコーナー画像を使用して、各コーナーに小さなセルがあるテーブルラティスの難解な方法を使用する必要があります。

于 2010-07-12T21:52:52.960 に答える
0

CSS3Pie (IE6-9 で動作)を強くお勧めします。

于 2011-12-04T01:44:28.307 に答える
0

実際、IE には独自の CSS 拡張機能があり、影を追加できます。

    .shadowed {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3); }

角を丸くするには、画像または JavaScript を使用する必要があります。DD_Roundies を試してみましたが、とても満足しています (ただし、いくつかのバグがあります)。

他のブラウザに関しては、これを使用できます：

    /*************************************************/
    /* The properties follow this format:            */
    /* property-name: x-offset y-offset blur #color; */
    /*************************************************/

    box-shadow: 0 0 4px #000; /* For Opera */
    -moz-box-shadow: 0 0 4px #000; /* Firefox */
    -webkit-box-shadow: 0 0 4px #000; /* WebKit browsers (Safari, Chrome, etc.) */
于 2010-07-17T07:20:07.230 に答える
0

最良の方法は、最新のブラウザー用に Web サイトを設計し、ボックスの影や境界線の半径などを古いブラウザーや IE に対して適切に低下させることです。

IEで角を丸くする必要がある場合は、簡単で軽量なこの方法を使用します...

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

残念ながら、IE のボックス シャドウはどうにもなりません。

于 2010-07-14T16:11:44.887 に答える