如何让左边框与左下像素的下边框重叠？

Posted 2023-02-17

【中文标题】如何让左边框与左下像素的下边框重叠？

【英文标题】：How to let the left border overlap the bottom border on the bottom-left pixel?

【发布时间】：2012-01-20 12:08:00

【问题描述】：

假设我有以下 CSS sn-p：

div 
    width: 200px;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-bottom-color: red;
    border-left-color: blue;

左边框为蓝色，下边框为红色。但是在我的浏览器中，左侧和底部边框重叠的左下角像素是红色的。显然，底部边框与该像素的左边框重叠。

我是否可以手动设置重叠顺序或以另一种方式完成左下像素为蓝色而不是红色？

【问题讨论】：

您在一个存在完全相同问题的网站上提问 =) 检查您个人资料上的标签，例如“摘要”标签。

似乎这取决于浏览器。你真的要为此付出那么多努力吗？ ***.com/questions/5894642/…

@Niklas：我是个完美主义者。 ;-)

【参考方案1】：

左下角像素的颜色属于你的浏览器，你不能覆盖它。

但是，对于这种高级情况，您可以使用嵌套 div。试试这个：

div.parent 
    width: 200px;
    border-width: 1px;
    border-style: solid;
    border-left-color: blue;


div.child 
    width: 200px;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-bottom-color: red;

你的 html 是：

<div class="parent">
    <div class="child">
        Your content will appear correctly.
    </div>
</div>