css - 如何使用CSS添加背景图像，看起来像div的每一侧的边框

Question

基本上我想在我的内容 div 的左侧和右侧创建一个自定义边框。我已经设法创造了一半有效的东西。我得到的问题是对齐 div 以便与内容 div 齐平并且看起来像边框而不是浮动线。很难解释，所以请看我想要的攻击图像。

干杯

希望我有一些意义。

替代文字 http://www.webquark.co.uk/shadowed-borders.jpg

Answer 1

基本技术称为“仿列”，并在同名文章中进行了说明。本文介绍了如何使用“掩盖”浮动侧边栏，但这与您想要实现的基本原理相同。

Answer 2

您应该创建一个覆盖 2 个投影的宽 1 像素高度位图，并将其作为最外层 div 的背景（或者您可以将其放入主体中）。将其居中并将其设置background-repeat为repeat-y.

例如，本网站使用了这种技术。它使用这个CSS：

body { 
  background-attachment: scroll;
  background-repeat: repeat-y;
  background-position: 50% 0px;
  background-color: #e8b36d;
  background-image: url("images/bg_center_orange.gif");
}

Answer 3

创建一个与 wrap div 一样宽的 PNG，并将其设置为 wrap 的背景：

CSS：

div#wrap {
    background: url('drop-shadow.png') repeat-y;
    width: // the width of #wrap should be the same as the width of the background image
}

HTML：

<div id="wrap">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

您可能需要内部 div 上的一些边距或填充，以便内容不会覆盖您的投影。