0

私が達成しようとしているのは、divの真ん中にある影だけです。私が今持っているものは次のとおりです。

<body style="background-color: #ccc;">
<div style="padding: 30px; 
        -webkit-box-shadow: inset 0px 0px 0px 20px #000;">
    Some text in the box</div>
</body>

次のようになります (#1):

ここに画像の説明を入力

しかし、私は達成したい（＃2）：

ここに画像の説明を入力

質問 A: CSS のみを使用して #2 を達成することは可能ですか?

質問 B:質問 A で「はい」の場合、2 をどのように変更して、上部と下部のみで効果を達成し、側面は左から右までずっと影を付けたままにする必要がありますか? (3)

ここに画像の説明を入力

明確化: 目的は、div の中央にのみ表示される 50% の影を使用することですが、HTML を変更することはできず、CSS のみを変更することはできません。また、ここに掲載されているコードは単純化されすぎています。div 内には、画像を含むいくつかの要素があります。彼らのBGを変更することはできません。

4

2 に答える 2

0

このhtmlを使用してあなたの＃3を達成しました：

<body>
    <div id="shadow">Some text in the box</div>
</body>

そしてこのCSS：

body, html {
    margin: 0;
    padding:0;
    background-color: #ccc;
}

div#shadow {
    margin-top:20px;
    padding: 15px 30px;
    background-color: #000;
    color:white;
}

ここで見ることができます：http://jsfiddle.net/quPB5/

編集：

変更された CSS のみを次に示します。

<body style="background-color: #ccc;margin: 0;padding:0;"><div style="margin-top:20px;padding: 15px 30px;background-color: #000;color:white;">Some text in the box</div></body>
于 2013-05-31T17:24:30.157 に答える