CSS中的左边框和右边框高度相等答案

【问题标题】：Equal border-left and border-right height in CSSCSS中的左边框和右边框高度相等
【发布时间】：2012-05-21 06:36:34
【问题描述】：

如何使左边框与右边框的高度相同？换句话说，如何改变边框的顺序？左边框比右边框高。这会导致 1px 的“差距”。

.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}

【问题讨论】：

标签： css border

【解决方案1】：

正在发生的事情是，css 试图在边框中做出漂亮的对角线颜色变化。如果将所有1px 更改为10px，就会发现问题。（图片见：http://jsfiddle.net/DaTCy/1/）

如果您使用 1px 宽度的边框，底部和右侧边框将始终在右下角像素重叠。

编辑：作为一种解决方案，您可以尝试将底部边框的宽度设为 0px，并解决您放置按钮的容器中的高度问题。

【讨论】：

你是对的。但是您有任何解决方案/替代方案吗？我不想使用 2px。

【解决方案2】：

最简单的解决方案是显式使用：

border-bottom-width: 0;

JS Fiddle demo.

【讨论】：

【解决方案3】：

将border-left/-top/-right 和border-bottom 用于不同的 [嵌套] 元素。

【讨论】：