如何利用CSS，看起来像一个边框向下一个div的每一侧添加背景图片

StackOverflow https://stackoverflow.com/questions/960493

  •  12-09-2019
  •  | 
  •  

题

Basicly我想创建一个自定义边框，顺着我的内容div的左侧和右侧。我设法创造的东西，一半的作品。这个问题我得到它对准的div，这样对内容的div冲洗，看起来像边界，而不是浮线。这是很难解释的，请看到我想要的攻击图像。

干杯

希望我已经取得了一些SENCE。

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

有帮助吗？

解决方案

的基本技术被称为“人造列”和本文中具有相同名称的说明。本文将介绍如何使用“掩盖”浮动工具条，但它的基本原理相同，以你想要达到的目标。

其他提示

您应该创建一个覆盖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");
}

作为涡卷DIV创建一个PNG一样宽，并将其设置为背景，以涡卷：

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一些保证金或填充，使得内容不包括你的阴影。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top