CSS 边框图像比 div 宽

Question

我正在 div 的底部添加图像边框，如下所示：

HTML:

<div class="view">
    <div class="shadow_overlay"></div>
</div>

CSS:

.view {
    text-align: center;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    width: 160px;
    height: 190px;
    border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
    border-image-slice: 1;
    border-image-width: 4px 0px 0px 0px;
}
.shadow_overlay {
    background: url('http://i.imgur.com/MrVzqyp.png') 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-left:auto;
    margin-right:auto;
    width:160px;
    height:190px;
}

这有效，但实际上 border-image 比我的 div 宽。

问题图片：

我该如何解决这个问题？

演示版here

Answer 1

似乎浏览器在使用 border-image 时为边框分配了默认宽度（但另一边的边框是不可见的，因为 border-image-width 是 0px）。为避免边框看起来像溢出 div，手动将所有其他边的边框宽度设置为 0px。

border-width: 4px 0px 0px 0px;

此行为出现在 Chrome（最高 v48.0.2535.0 dev-m）、IE (Edge)、Opera 和 Safari 中。在最新的 Firefox (v41.0.1) IE (v11) 中，边框图像不会超出 div，

.view {
  text-align: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  width: 160px;
  height: 190px;
  border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  border-image-slice: 1;
  border-image-width: 4px 0px 0px 0px;
  border-width: 4px 0px 0px 0px;
}
.shadow_overlay {
  background: url('http://i.imgur.com/MrVzqyp.png') 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  height: 190px;
}

<div class="view">
  <div class="shadow_overlay"></div>
</div>

在下面的代码片段中，您可以看到它看起来好像所有其他边都有一个 3px 的边框。在 Web 或规范中都没有明确解释谁的行为是正确的（Chrome、Edge 或 FF、IE11）。

.view {
  text-align: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  width: 160px;
  height: 190px;
  border-image: linear-gradient(to right, rgb(139, 191, 64) 25%, rgb(230, 27, 33) 25%, rgb(230, 27, 33) 50%, rgb(124, 196, 236) 50%, rgb(124, 196, 236) 75%, rgb(254, 181, 17) 75%);
  border-image-slice: 1;
  border-image-width: 4px 0px 0px 0px;
  }
.view#two{
  border-width: 4px 3px 3px 3px;
}
.shadow_overlay {
  background: url('http://i.imgur.com/MrVzqyp.png') 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  height: 190px;
}

<div class="view">
  <div class="shadow_overlay"></div>
</div>

<div class="view" id="two">
  <div class="shadow_overlay"></div>
</div>

W3C 规范还说明了以下关于边框图像属性的内容，但在 FF 和 IE11 中，当仅提供 border-width 并避免使用 border-image-width 时，不会显示 border-image。

The border-image properties do not affect layout: layout of the box, its content, and surrounding content is based on the ‘border-width’ and ‘border-style’ properties only.

因此，border-image 的行为似乎仍未标准化。我倾向于在 Chrome、Edge 中观察到的内容，因为出于某种原因，Microsoft 似乎已经更改了 IE11 的行为，因此必须有充分的理由。

CSS 边框图像比 div 宽

CSS border image is wider than the div

html

css

border

border-image