Question

我想要实现的只是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）：

enter image description here

但我想实现（＃2）：

enter image description here

问题A：是否可以仅使用CSS实现＃2 ？

问题B：如果对问题A表示肯定，应如何修改＃2以仅在顶部和底部实现效果，从左侧到左侧一直遮挡两侧对（＃3）？

enter image description here

澄清：目的是使用仅在div中间显示的50％阴影，但我不能更改任何HTML，只能改变CSS。此外，此处发布的代码过于简单。 div中有几个元素，包括图像。我不能改变他们的BG。

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

Answer 2

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

我把它放在一切，但你也可以把它放在你想要的元素上。

还为阴影添加插页。

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，它正在行动：

就你的上一个问题而言，我有点不确定你想要什么。阴影只在顶部和底部？那会很酷......可能会使用一些伪元素---？？？

Box-shadow仅在<div> </div>的中间

2 个答案: