2

CSS3 の box-shadow プロパティを試してみたところ、オブジェクトがそれをキャストして影をクリップするのを防ぐことができるかどうか疑問に思っていました。次のコードでは、影を落としている DIV は見えませんが、影は切り取られています。CSSでこれを行う方法はありますか? また、おそらくJavaScript / JQueryで？または、box-shadow オフセットを DIV よりも大きく設定し、影を再配置する唯一の方法です (あまりエレガントではありません)。

div#shadow
{
    position: absolute;
    background-color: transparent;
    top: 100px;     
    left: 100px;
    width: 300px;
    height: 200px;
    box-shadow: 100px 100px 100px gray;
}
4

2 に答える 2

1

私はページ外の位置要素のファンではありませんが、それは良い方法でしょうか?

div#shadow {
    position: absolute;
    background-color: transparent;
    top: 100px;     
    left: -9999px;
    width: 300px;
    height: 200px;
    box-shadow: 10199px 100px 100px gray;
}

プロパティleftに大きな負の値を指定してから、box-shadowの左のプロパティに次の式を使用して計算された数値を指定します。

0 - actual negative left + desired left + original box-shadow's left

したがって、上記の例では、次のようになります。

0 - -9999 + 100 + 100 = 10199

このjsfiddleで動作することがわかります。

私が見ることができる唯一の他の方法は、影と一致するようにのborder-radiusとを一致させることです。がこの場合だろうが、まったく一致させることができず、もちろん、別の色やイメージで変更されます.background-colourdivborder-radius100pxbackground-color

于 2013-01-14T11:42:35.590 に答える
-1

opacity透明な背景色の代わりに使用すると、機能するはずです。

于 2013-01-14T10:45:59.520 に答える