图像边框和常规边框不一起工作？

Question

我有一个div，从顶部沿y轴重复图像边框。

background:url(../shadow_left.png) repeat-y top left;
border:1px solid black;

问题是，我的客户端也需要一个1px边框，以及背景边框图像。

如果我只是添加 1px纯黑色边框，它将显示在背景图像边框之后。

由于背景边框是阴影，我需要在它之前的1px常规边框，而不是在它之外。目前它出现在外面，这让它很难看。

有什么想法吗？

由于

Answer 1

您可以尝试多种选择。

首先，您可以在右侧为实际图像文件添加1px边框。

其次，您可以将内部DIV添加到当前的DIV中。内部DIV将具有内容和1px边框，然后外部div具有背景图像。你需要让内部DIV的left-margin等于与阴影所用图像相同的宽度。

希望有意义

Here is a sample

Answer 2

您可以尝试使用box-shadow的css3属性：

  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 0px 0px 4px 0px #ffffff; /* FF3.5 - 3.6 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

取自CSS3 Please!

或者您应该将边框添加到阴影图像。