488

これどうやってするの？要素に影の下線があるように見せたいです。他の3つの側面の影は必要ありません。

4

4 に答える 4

1035

これを行う： 

box-shadow: 0 4px 2px -2px gray;

ブラーを（3番目の値）に設定し、スプレッド（4番目の値）をその負の値に設定すると、実際にははるかに簡単になります。

于 2011-06-05T21:08:28.753 に答える
58

2つの要素を使用して、一方を他方の内側にoverflow: hidden配置し、外側の要素と内側の要素に等しい幅を下部のパディングとともに指定して、他のすべての側面の影が「切り取られる」ようにすることができます。

#outer {
    width: 100px;
    overflow: hidden;
    padding-bottom: 10px;
}

#outer > div {
    width: 100px;
    height: 100px;
    background: orange;

    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

または、外側の要素をフロートさせて、内側の要素のサイズに縮小します。参照： http： //jsfiddle.net/QJPd5/1/

于 2010-12-30T08:39:30.660 に答える
26

これを試して

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

あなたはそれをhttp://jsfiddle.net/wJ7qp/で見ることができます

于 2011-08-14T23:32:53.300 に答える
11

これを試して、ボックスシャドウを完全に制御します。

    <html>

    <head>
        <style> 
            div {
                width:300px;
                height:100px;
                background-color:yellow;
                box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
           }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

    </html>

これは、外箱の影にも当てはまります。

于 2012-12-03T10:21:45.810 に答える