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

【问题标题】：How do I show a BUTTON border outside of it's parent DIV area?如何在其父 DIV 区域之外显示 BUTTON 边框？
【发布时间】：2015-07-05 18:34:20
【问题描述】：

我尝试使用 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>

【问题讨论】：

只是好奇..你为什么需要这个？
我正在尝试为我的平面文件论坛制作一个导航栏。我想我会喜欢它的外观。
边框实际上只会在您悬停时添加，如果您将鼠标悬停在链接上，您将获得常规光标并且看起来不正确。
你可以选择任何你喜欢的光标，这是一个 CSS 属性。
我知道，但这是我试图尽可能简短的文件。当有更好的选择时，我认为这是不必要的。不过谢谢！

标签： html css parent

【解决方案1】：

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

button {
  transform: translateY(5px);
}

Fiddle

【讨论】：

使用这个按钮在 div 上的光标之前转换，尽管我猜这并不重要。谢谢。

【解决方案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*?

【讨论】：

【解决方案3】：

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

参见this fiddle，我还为<button> 设置了很大的高度，为<div> 设置了一点高度以使其更明显。

【讨论】：