html - 用 border-image 勾勒出边框

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图像上的示例 2 在黄色背景下有蓝色背景。黄色背景是边框(img.png)。问题是，如果我使用 img.png 半(或大部分)透明，蓝色就会出现，我不希望这样。另外，我不想使用绝对值(:before:after)。我正在寻找一些优雅的方法。

Answer 1

据我了解，您使用的是具有一些透明区域的 .png 图像。

由于将其用作边框图像，div 的背景通过该边框图像出现。

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

Background-Clip @ MDN

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

Support是 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>

如您所见，没有“剪裁”，边框和背景结合在一起，有剪裁，边框独立。