我在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
更宽。
问题图片:
如何解决此问题?
DEMO here
答案 0 :(得分:3)
似乎浏览器在使用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 Specs还说明了有关边框图像属性的内容,但在FF和IE11中,仅提供border-image
并且避免border-width
时,border-image-width
未显示。
边框图像属性不会影响布局:框的布局,其内容和周围内容仅基于“边框宽度”和“边框样式”属性。
因此,似乎border-image
的行为仍未标准化。我倾向于在Chrome,Edge中观察到的内容,因为微软出于某种原因似乎已经改变了IE11的行为,因此必须有充分的理由。