web-dev-qa-db-ja.com

CSSボックスの影の下のみ

どうやってこれをするの？私は自分の要素に影の下線があるように見せたいです。私は他の3面の影が欲しくない

csscss3underlinebox-shadow
332
WillingLearner

これを行う：

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

ぼかしを（3番目の値）に設定しても、広がり（4番目の値）をマイナスに設定しても、実際にははるかに簡単です。

728
Steve B

一方の要素をもう一方の要素の内側に配置し、外側の要素を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/ /

47
Yi Jiang

これを試して

-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/ で見ることができます

23
Nermien Barakat

これを試して、ボックスシャドウをあなたの完全な制御下に置いてください。

    <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>

これは外側のボックスシャドウにも当てはまります。

11
Saeed Tavoosi