如何在其父 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

如果您的目标是让按钮比其父按钮低 5px div，您可以添加此 CSS:

button {
  transform: translateY(5px);
}

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 上指出这个有点相关的问题。

Answer 3

只需从 CSS.

中抑制 border: 0; 即可实现您想要的

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

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

How do I show a BUTTON border outside of it's parent DIV area?

html

css

parent