html - 去除边界 Angular 的斜 Angular 效果

Question

如果一个元素存在于具有不止一种边框颜色的页面上，这些颜色相交的 Angular 默认会创建一个斜 Angular 。对于 border-corner 样式来说，这似乎是一个奇怪的选择。相反，我更喜欢其中一个边界“压倒”另一个边界，以便显示一条直线。

为了说明这种效果，请考虑以下内容:

参见我创建的示例 jsFiddle 示例 here .

顶部的两个元素显示默认的倾斜行为。底部的两个显示所需的预期行为，在这种情况下，border-top“压倒”或“覆盖”border-left 和 border-right 的 Angular 。

顶级案例的标记:

<div class="container">
    <div class="border">Item one</div>
    <div class="border">Item two</div>
</div>

还有 CSS:

.container {
    margin: 5px;
    width: 150px;
    background: yellow;
}
.border {
    padding: 5px;
    border: 15px solid red;
    border-top: 15px solid teal;
}

底部案例的标记:

<div class="container">
    <div class="border-top"></div>
    <div class="border-reg">Item one</div>
    <div class="border-top"></div>
    <div class="border-reg">Item two</div>
</div>

还有 CSS:

.border-top {
    border-top: 15px solid teal;
}
.border-reg {
    border: 15px solid red;
    border-top: 0;
    padding: 5px;
}

虽然我设计的第二种方法确实产生了我想要的效果，但对于我假设具有默认状态的东西来说，这似乎是不必要的乏味。例如，如果我想要 border-left 覆盖其他边框，我将不得不处理一些 float: left 和内联元素的疯狂。

问题(最后)

是否有任何更简单的方法来删除在所有浏览器上观察到的默认斜 Angular 行为？

虽然上面详述的案例很容易让 border-top 或 border-bottom 覆盖 Angular ，但这并不是一件容易的事，例如，如果我需要 border-left 和 border-right 来覆盖border-top 和 border-bottom.

Answer 1

如果您不需要对旧版浏览器(IE 8 及更低版本)的支持，您可以使用 box-shadow:

.border {
    padding : 35px 20px 20px 20px;
    box-shadow: inset 0 0 0 15px red, inset 0 15px 0 15px teal;
}

http://jsfiddle.net/fTGDs/