仅在 <DIV> 中间的框阴影答案

【问题标题】：Box-shadow only in the middle of a <DIV>仅在 <DIV> 中间的框阴影
【发布时间】：2013-05-31 17:02:11
【问题描述】：

我想要实现的是 仅在 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。

【问题讨论】：

为什么不直接改变背景颜色呢？我看不出您要在这里实现什么...如果您愿意，可以给一个盒子一个内阴影... box-shadow: inset 0 0 10px #000000;
使用背景，您可以使用 background-origin: content-box; 将原点设置为内容框，但框阴影始终附加到边框框，因此它不起作用。你可以得到你想要的东西，如果你用 :first-line 捏造它（如果你的文本只有一行长），但这并不理想，因为它是文本的宽度，没有任何黑客攻击。 jsfiddle.net/zZnQu
@DavidKnag，因为我只能更改 CSS，不能创建另一个 div，它大于我想要阴影的区域加上效果应该是背景图像上的阴影。所以我不能改变背景颜色。 inset 已经被使用了，虽然我希望阴影在盒子的中间，而不是在它的边缘内侧。
css3generator.com
如果在 div 上使用渐变背景会怎样？

标签： styles stylesheet css

【解决方案1】：

我已经使用这个 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>

【讨论】：

我无法更改 HTML，只能更改 CSS。但似乎你获得了#2，而不是#3。
我没有改变你的 html 我修改了 css。我现在就按你的方式展示。在你的第三张图片中，它显示了黑色从左到右，我做到了。
您已经创建了一个 div ID。此外，我无法更改现有 DIV 的边距或填充，因为它会影响合成中的其他项目。

【解决方案2】：

您可以使用“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+ */
}

HERE 是一个 jsfiddle 与它在行动：

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

【讨论】：

我来看看。我想达到预期的效果，即顶部/底部的光和从左/右齐平的阴影。
等等，我看到里面有光，外面有黑暗。那是一个正常的影子。我想要相反的......
我想我没有仔细阅读你的问题。对于那个很抱歉。你可以放一个边框：20px solid transparent；也许......我已经更新了上面的小提琴以反映这个选项。
对不起。还是一头雾水。我不明白。你要使用带有淡入淡出的盒子阴影吗？我想我走错了方向。
如果你给我一个链接或什么地方你已经看到了想要的效果，也许我能理解。黑盒子让我失望。