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

Posted 2023-05-07

【中文标题】图像边框和常规边框不能一起工作？

【英文标题】：image border and regular border not working together?

【发布时间】：2012-03-08 20:50:09

【问题描述】：

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

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

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

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

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

有什么想法吗？

谢谢

【问题讨论】：

将 1px 边框添加到图像文件中（在右侧）

我不能，他希望能够不时改变它的颜色。

没有插图真的很难理解你的要求。

为什么难？ css 边框出现在图像边框之外。我想要它在里面，即在 DIV 旁边。

您对“之前”和“之后”这两个词的使用对我来说没有任何意义。此外，术语“图像边框”令人困惑；它不是真正的边界，而是背景。也许它只有几个像素宽，但它仍然是背景。 （“边框图像”是完全不同的东西。）

【参考方案1】：

您可以尝试几个选项。

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

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

希望这是有道理的

Here is a sample

【讨论】：

第二个想法听起来像是 OP 要求的。

【参考方案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!

或者你应该给阴影图像添加边框。