Question

请看这里： http://jsfiddle.net/ztu267zp/1/

border:3px solid grey;
border-bottom: 8px solid red;

在底角，您可以看到灰色和红色边框都是对角线相交的。

我可以将灰色边框切割到DIV底部并且红色边框在整个距离上都有100％的宽度吗？

非常感谢，

立即使用框阴影，但在这里，Chrome和FF中没有干净的边缘：

http://imgur.com/mf7ABEO

由于亚光

Answer 1

它不可能，但你可以使用这样的东西

<div id="bord">
<div class="line-cover">
</div>

CSS

#bord{
height:200px;
width:200px;
border:3px solid grey;
border-bottom: 8px solid white;
}
.line-cover{
position: relative;
border-bottom: 8px solid red;
width: 100%;
top: 200px;
padding: 0 3px;
left: -3px;
}

Fiddle here

Answer 2

怎么样。像那样，使用伪元素after？

#bord{
    height:200px;
    width:200px;
    border:3px solid grey;
    border-bottom: 0;
    /*border-bottom: 8px solid red;*/
    position: relative;
}

#bord:after {
    display: block; 
    background: red; 
    height: 8px; 
    width: 100%; 
    content: ''; 
    position: absolute; 
    bottom: -8px; 
    left: 0;
    margin: 0 -3px;
    padding: 0 3px;
}

http://jsfiddle.net/ztu267zp/4/

CSS边框在div中折叠不同的大小

2 个答案: