Css 使用方框阴影模拟分页符

我试图用CSS创建一个页面分隔，但是我遇到了box shadow属性的问题

我有一个容器，它看起来像一个黑色的页面，我想把它分成两个页面，两个页面的外观与页面的结尾和开头相同。下面是我注意到的侧面阴影和底部阴影之间的间隙的图像：

这是所需输出的图像：

要求：

我需要在分离角得到完全相同的结果。 我不能使用两个容器，因为我在其中拖放项目，我只能使用一个容器。 容器高度是动态的。

HTML:

---

第三个长方体阴影属性是v形阴影，它可以上下移动整个阴影

使用长方体阴影实现所需效果的唯一方法是将长方体阴影应用于容器，并将v形阴影设置为0，但将填充应用于容器的底部和右侧

---

我不确定将该元素放到容器中会如何影响拖放到该元素中-毕竟，它已经被其他DOM元素（如body）包含。

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

使用长方体阴影实现所需效果的唯一方法是将长方体阴影应用于容器，并将v形阴影设置为0，但将填充应用于容器的底部和右侧

---

我不确定将元素放到容器中会如何影响拖放到该元素中-毕竟，它已经被其他DOM元素（如body）所包含。

不太确定您要查找什么，但是否会更适合

使用此类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;
}

---

不太确定你在寻找什么，但是一个更适合吗

使用此类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;
}

---

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

HTML:

如果您的容器的高度是绝对的，并且在代码中是固定的，那么它是500px，您仍然可以计算高度的值：在您自己之后，它是443px，而不使用calc。但是，如果它不是绝对的，这个解决方案将不起作用

请注意，我在演示中添加的脚本只是为了显示用户仍然可以与实际容器交互。所有的：before和：after被发送到后面

---

最后，您可以使用更多的元素（包括真实元素和伪元素）来实现所需的功能，但这相当复杂，需要大量的定位和分层技术

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

HTML:

如果您的容器的高度是绝对的，并且在代码中是固定的，那么它是500px，您仍然可以计算高度的值：在您自己之后，它是443px，而不使用calc。但是，如果它不是绝对的，这个解决方案将不起作用

请注意，我在演示中添加的脚本只是为了显示用户仍然可以与实际容器交互。所有的：before和：after被发送到后面

---

最后，您可以使用更多的元素（包括真实元素和伪元素）来实现所需的功能，但这相当复杂，需要大量的定位和分层技术

这就是你想要得到的效果吗

---

这就是你想要得到的效果吗

如果要在容器内使用方框阴影模拟分页符，可以执行以下操作：

输出：

*****编辑*****

对于您的用例，您可以删除一个div，然后稍微调整阴影，您可以得到以下结果：

第一个演示的代码：

HTML:

如果要在容器内使用方框阴影模拟分页符，可以执行以下操作：

输出：

*****编辑*****

对于您的用例，您可以删除一个div，然后稍微调整阴影，您可以得到以下结果：

第一个演示的代码：

HTML:

---

这里有两个困难：

长方体阴影大于元素，而不仅仅是向右移动。这可以通过阴影框中的“扩展半径”选项解决。看见 长方体阴影看起来模糊，但在元素的顶部除外。这可以通过用伪元素覆盖顶部阴影来解决。。。这是一个奇怪的设计选择，但我还是把它留在了我的示例中，以了解您是如何使用它的 也许可以。

---

以扩展半径为例，用伪元素覆盖长方体阴影的顶部模糊：

这里有两个困难：

长方体阴影大于元素，而不仅仅是向右移动。这可以通过阴影框中的“扩展半径”选项解决。看见 长方体阴影看起来模糊，但在元素的顶部除外。这可以通过用伪元素覆盖顶部阴影来解决。。。这是一个奇怪的设计选择，但我还是把它留在了我的示例中，以了解您可能会如何做。

---

---

以扩展半径为例，使用伪元素覆盖长方体阴影的顶部模糊：

为什么不制作两个容器？-我忘了提，但我不能用两个容器。。。我在这里拖放项目，项目包含在容器中。你说得对，很难解释。我真的不明白问题出在哪里。图像和红色矩形没有任何意义。也许应该添加一些显示您想要的结果的图像。我现在就做，很抱歉。为什么不做两个容器呢？-我忘了提，但我不能用两个容器。。。我在这里拖放项目，项目包含在容器中。你说得对，很难解释。我真的不明白问题出在哪里。图像和红色矩形没有任何意义。也许应该添加一些显示你想要的结果的图像。我现在就做，很抱歉。我会看的，最困难的是复制完全相同的阴影效果。。我还需要能够设置分隔的上下部分，以防我只有一页。@Superdrac要增加相似性，可以用伪元素修补hr，对于其余的，我还是不明白，如果只有一页？这是为了打印吗？只是为了显示，但有不止一页。。容器的高度是动态计算的，我会看一看，最困难的是复制完全相同的阴影效果。。我还需要能够设置分隔的上下部分，以防我只有一页。@Superdrac要增加相似性，可以用伪元素修补hr，对于其余的，我还是不明白，如果只有一页？这是为了打印吗？只是为了显示，但有不止一页。。容器的高度是动态计算的，我不能这样做。。在我的项目中，我需要添加多个页面交集，因此我不能在容器本身上使用aftore&before属性。我绝对需要向dom中添加元素。@Superdrac因此，对于每个虚拟节，您需要在容器中包装一个真实元素，将其发送到后面，注意容器的背景不应默认设置为透明，也应在虚拟节上设置边框和框影。顺便说一句，除非你的老板希望你用这种奇怪的方式来做，否则你不应该把事情弄得更复杂。谢谢你的建议和代码解释！我检查了这个明日锅，所以我不能用它，因为高度是动态的。我现在没有任何解决方案…我不能这样做。。在我的项目中，我需要添加多个页面交集，因此我不能在容器本身上使用aftore&before属性。我绝对需要向dom中添加元素。@Superdrac因此，对于每个虚拟节，您需要在容器中包装一个真实元素，将其发送到后面，注意容器的背景不应默认设置为透明，也应在虚拟节上设置边框和框影。顺便说一句，除非你的老板希望你用这种奇怪的方式来做，否则你不应该把事情弄得更复杂。谢谢你的建议和代码解释！我检查了这个明日锅，所以我不能用它，因为高度是动态的。我现在没有任何解决方案…不，确切地说，看看我的第一把小提琴和图片。我用的是chrome，它完全坏了-不知道你想做什么。如果您想要一个可视分隔符，为什么不在语义上分割html并对它们进行样式化，而不是创建两个语义上没有意义的分隔符分隔符呢。。。或者我是不是弄错了方向？我替换了JSFIDLE链接。我不能实际分割我的容器，它必须保持虚拟。不，确切地说，看看我的第一把小提琴和图像。我用chrome做了，它完全坏了——不知道你想做什么。如果您想要一个可视分隔符，为什么不在语义上分割html并对它们进行样式化，而不是创建两个语义上没有意义的分隔符分隔符呢。。。或者我是不是弄错了方向？我替换了JSFIDLE链接。我不能物理分割我的容器，它必须保持虚拟。这似乎与你的解决方案很好，我不需要像我的例子中那样多的阴影。我将尝试减少您的值，并检查它是否正常@Superdrac可以将阴影调整为

---

和你的图片一样，我现在没有时间这么做，但我会在明天告诉我你以前是否处理过，否则我会在明天调整。@Superdrac我调整了阴影并删除了一个div。请看这里：如果这是你需要的，我会在我的回答中包括它，但我会先等待你的反馈。它看起来很完美！真的谢谢你！这似乎与你的解决方案是好的，我不需要那么多的阴影，只有像在我的例子。我将尝试减少您的值，并检查它是否正常@Superdrac可以调整阴影使其与您的图像相同，我现在没有时间这样做，但我会在明天告诉我您以前是否处理过，否则我会调整tomorow。@Superdrac我调整了阴影并删除了一个div。请看这里：如果这是您需要的，我会把它包括在我的答案中，但我会先等你的反馈。它看起来很完美！真的谢谢你！

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;
}

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

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;     
}

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

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;
}

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

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;
}