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

您可以使用“box-sizing”在 div 内移动填充和边框等，并以这种方式 - 尽管填充或阴影发生变化，但仍保持 div 大小。在这种情况下，我在通配符上有 box-sizing，*

我把它放在所有东西上，但你也可以把它放在你想要的元素上。

还要为你的阴影添加插图。

HTML

<div class="box box-shadow">inset shadow</div>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* this moves padding and borders and such inside the div instead of outside */

.box {
    width: 300px;
    height: 100px;
    padding: .5em;
    background-color: rgba(255,255,255,.1);
}

.box-shadow {
  -webkit-box-shadow: inset 0px 0px 50px 5px #f06; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: inset 0px 0px 50px 5px #f06; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}

这里是一个 jsfiddle 与它在行动：

至于你的最后一个问题，我有点不确定你想要什么。阴影只在顶部和底部？那会很酷……也许可以使用一些伪元素——？? ?

于 2013-05-31T17:35:55.747 回答
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 回答