我在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宽。
问题图片:
html - CSS边框图片比div宽-LMLPHP
我该如何解决这个问题?
演示here

最佳答案

使用border-image时,浏览器似乎会为边框指定默认宽度(但另一侧的边框不可见,因为border-image-width0px)。要避免边框看起来像溢出了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边框。无论是在网络上还是在规范中,都没有明确的解释谁的行为是正确的(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-image并且避免border-width时,不会显示border-image-width
边框图像属性不影响布局:框的布局、内容和周围内容仅基于“边框宽度”和“边框样式”属性。
因此,似乎border-image的行为仍然不规范。我倾向于Chrome中的Edge,因为出于某种原因,微软似乎已经改变了IE11的行为,所以这必须有一个很好的理由。

09-25 16:51
查看更多