Question

C 暂不发布图片，所以这里有link to the image以便更好地了解问题。

1） div，没有边框。

2） div和边框（黄色在蓝色之上）。

3）这就是我需要的（黄色勾勒到底部）。

T 代码应该是这样的：

CSS：

.thediv {
width: 500px;
height: 200px;
background: #0000FF;
-moz-border-image: url(img.png) 12 1 round;
-webkit-border-image: url(img.png) 12 1 round;
-ms-border-image: url(img.png) 12 1 round;
border-image: url(img.png) 12 1 round;
border-style: solid;
border-width: 0 0 10px;
}

HTML：

<div class="thediv"></div>

有关此问题的两个字：

我需要在div之外移动边框，而不需要新的HTML标记和/或绝对属性。

关于此问题的两个以上的词语：

E 图像上的xample 2在黄色下面有蓝色背景。黄色背景是边框（img.png）。问题是，如果我使用img.png一半（或大多数）透明，将出现蓝色，我不想要这个。另外，我不想使用绝对值（:before:after）。我正在寻找一些优雅的方法。

Answer 1

据我所知，你使用的是具有透明区域的.png图像。

由于将此作为边框图像使用，div的背景将通过此边框图像显示。

有一个属性background-clip允许我们将背景限制为元素布局框的特定区域。

documentation

background-clip CSS属性指定元素的背景（颜色或图像）是否在其边框下方延伸。

Background-Clip @ MDN是IE9及以上

在这种情况下，您只希望背景延伸到填充的边缘（而不是边框）。

所以：

.thediv {
  width: 500px;
  height: 50px; /* for demo */
  background: #0000FF;
  border-style: solid;
  border-width: 0 0 30px; /* for demo */
  border-color: rgba(255, 0, 0, 0.5);
  margin-bottom: 1em;
  ;
}
.clip {
  background-clip: padding-box;
  ;
}

<div class="thediv"></div>

<div class="thediv clip"></div>

正如你所看到的，如果没有“剪裁”，边框和背景会合并在一起，剪辑会使边框独立。

Answer 2

将box-sizing属性设置为content-box。这将从框的宽度中排除边框。我认为它已在某处设置为box-sizing: border-box;。请使用以下CSS：

.thediv {
    box-sizing: content-box;
}

用边框图像勾勒边框

2 个答案: