如何在其父DIV区域外显示BUTTON边框？

Question

我尝试使用box-shadow，我想知道是否有任何简单有效的方法。

CSS

div {
text-align: left;
background: #F5F5F5;
width: 500px;
padding: 10px 10px 0 10px;
margin: 10px;
}
button {
border: 0;
border-bottom: 5px 0 0 #F00;
background: #F5F5F5;
width: 100px;
padding: 10px 0;
}

HTML

<div>
<button>test_1</button>
</div>

Answer 1

如果您的目标是按钮比其父inline-flex低5px，则可以添加此CSS：

div

Fiddle

Answer 2

我不确定浏览器是否支持button元素上的伪元素，但这适用于Chrome。

div {
    text-align: left;
    background: #F5F5F5;
     border-bottom:1px solid grey; /* for demo only */
    width: 500px;
    padding: 10px 10px 0 10px;
    margin: 10px;
}
button {
    border-width:0;
    background: #F5F5F5;
    width: 100px;
    padding: 10px 0;
    position: relative;
}

button:hover::after {
    content: '';
    position: absolute;
    top:100%;
    left:0;
    width: 100%;
    height: 0;
    border-bottom: 5px solid #F00;    
}

<div>
    <button>test_1</button>
</div>

我也会在SO上指出这个问题有点相关。

Why are button's discouraged from navigation*?

Answer 3

只需从CSS中抑制border: 0;即可实现您的目标。

请参阅this fiddle，其中我还为<button>设置了一个很高的高度，为<div>设置了一个高度，使其更加明显。