Question

我正在尝试使用CSS创建页面分隔，但我遇到了box-shadow属性的问题。

我有一个看起来像黑色页面的容器whitch，我想把它分成两个页面，看起来像页面的结尾和开头一样。这是我所拥有的图像（注意侧面和底部阴影之间的间隙）：

这是所需输出的图像：

。

要求：

我需要在分离角上完全相同。
我不能使用两个容器因为我拖拉丢弃这一项中的项目，我只能使用一个容器。
容器高度是动态的。

HTML：

<div class="container">
    <div class="calPrin" id="barrePage1">
        <div class="calHaut"></div>
        <div class="calBas"></div></div>
    </div>
</div>

CSS：

body{
    background-color:rgb(186,186,186);
}

.container{
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 1px 1px;
    width: 782px;
    background-color: #FFFFFF;   
    height:500px;

}

.calHaut{
    width: 782px;
    background-color: rgb(255, 255, 255);
    border-bottom: solid 1px black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    box-shadow: 0.5px 1px 1px;
    position: absolute;    
}

.calBas{
    position: relative;
    top: 4px;
    background-color: rgb(255, 255, 255);
    height: 2px;
    width: 782px;
    border-top: solid black 1px;
    border-right: solid 1px black;
    border-left: 1px solid black;
}

.calPrin{
    top:50px;
    background-color: rgb(186,186,186);
    height: 6px;
    position: absolute;
    width: 786px;
    left:8px;
}

Answer 1

使用calc有一个漂亮的解决方案，但看起来calc仍然没有被旧版浏览器（特别是IE浏览器）广泛支持。您可以使用:before和:after为.container添加伪元素，只需为这些元素添加边框，框阴影和背景，而边框，背景和框阴影应删除容器（默认背景是透明的）。

<强> HTML ：

<div class="container">
  <h2>Title goes here</h2>    
</div>

<强> CSS ：

body{
  background-color:rgb(186,186,186);
}
.container {    
  margin-left: auto;
  margin-right: auto;    
  width: 782px;    
  height:500px;    
  position:relative;      
}
.container:before {
  content:'';    
  width:100%;
  height:50px;
  position:absolute;
  box-shadow:1px 1px 1px;
  left:0;
  top:0;
  z-index:-1;
  border:1px solid black;
  background:white;
}
.container:after {
  content:'';
  width:100%;
  height:calc(100% - 57px); /* 50px of the top and 7px of the divider */
  position:absolute;
  box-shadow:1px 1px 1px;
  left:0;
  bottom:0;
  z-index:-1;
  border:1px solid black;       
  background:white;     
}

如果您的容器的高度是绝对的（并且是固定的）（如代码中的500px），您仍然可以自己计算height :after的值（它是{ {1}}）不使用443px。但是，如果不是绝对的话，这个解决方案将不起作用。

Demo.

请注意，我在演示中添加的脚本只是为了表明用户仍然可以与实际容器进行交互。所有calc和:before都会被发送到后面。

最后，你总是可以使用更多元素（包括真元素和伪元素）来实现你想要的东西但它相当复杂，需要大量的定位和分层技术。

Answer 2

如果您希望使用框阴影在容器内模拟分页，则可以执行以下操作：

<强> DEMO

输出：

simulated pagebreak CSS

***** EDIT *****

对于你的用例，你可以删除一个div并对阴影进行一些调整，你可以得到这个：

<强> DEMO

第一个演示代码：

HTML：

<div class="container">
    <div class="calPrin"></div>
    <div class="shdw-right"></div>
</div>

CSS：

body {
    background-color:rgb(186, 186, 186);
}
.container {
    border: solid 1px black;
    margin-left: auto;
    margin-right: auto;
    width: 782px;
    background-color: #FFFFFF;
    height:500px;
    position:relative;
    margin-bottom:100px;
    box-shadow: 10px 10px 5px #656565;
}
.calPrin {
    position:relative;
    left:-1px;
    width:784px;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color:rgb(186, 186, 186);
    z-index:1;
    box-shadow: inset 0px 15px 5px -5px #656565;
}
.calPrin:before, .calPrin:after {
    content:'';
    position:absolute;
    background:#BABABA;
    z-index:2;
    width:10px;
}
.calPrin:before {
    height:100%;
    right:100%;
    border-right:3px solid #BABABA;
    box-shadow: 10px 0px 5px 0px #BABABA;
}
.calPrin:after {
    left:100%;
    top:20px;
    bottom:0;
    width:15px;
    box-shadow: 0px 10px 5px 0px #BABABA;
}
.shdw-right {
    position:relative;
    left:100%;
    width:30px;
    top:-31px;
    margin-left:-15px;
    height:20px;
    background:#BABABA;
    box-shadow: 0px -10px 5px 0px #BABABA;
}

Answer 3

你的第三个box-shadow属性是v-shadow，它可以向上或向下移动整个阴影。

使用box-shadow实现所需效果的唯一方法是将box-shadow应用于容器，并将v-shadow设置为0，但将padding应用于容器的底部和右侧。

我不确定如何将这个元素拖放到这个元素中会受到影响，因为它已经被其他DOM元素（如正文）包含了。

Answer 4

不太确定你要找什么，但<hr/>会更适应吗？的 DEMO

使用这样的CSS：

body{ background-color:rgb(186,186,186); } .container{ margin-left: auto; margin-right: auto; box-shadow: 1px 1px 1px, inset 0 0 0 1px; padding:1px; width: 782px; background-color: #FFFFFF; height:500px; } hr { padding:0; position:relative; border:none; height:8px; background-color:rgb(186,186,186); margin:0.25em -3px 0.25em -1px; border-bottom:1px solid; } hr:before { content:''; height:0.1px; margin:-3px 4px 3px 0px; display:block; box-shadow:2px 0px 1px 1px black; background:white; border-bottom:1px solid black; }

Answer 5

这是你想要获得的效果吗？ http://jsfiddle.net/mHn29/2/

<div class="pane">one</div>
<div class="pane">two</div>

css

body{
    background-color:rgb(186,186,186);
}

.pane{
    padding: 5px 10px;
    margin: 5px 0;
    border: 2px solid black;
    border-width: 2px 4px;
    background-color: #FFFFFF;  
    box-shadow: 1px 1px 1px;
}

Answer 6

这里有两个困难：

盒子阴影大于元素，而不仅仅是向右移动。这可以通过box-shadow中的spread-radius选项来解决。见box-shadow on MDN。
除了元素的顶部外，框阴影看起来模糊。这可以通过用伪元素覆盖顶部阴影来解决......这是一个奇怪的设计选择，但我还是在我的例子中留下它，看看你怎么做。

使用扩展半径示例并用伪元素覆盖box-shadow顶部模糊的笔：http://codepen.io/tholex/pen/uobEA

使用框阴影模拟分页符

6 个答案:

Demo.