Question

我将<hr>放在了一个角形弯曲div和该行的内部：

<div layout="column" flex>
      <div><hr style="border-color: green; height: 10px; background-color: green;"/></div>
// other divs
</div>

gives me the following result

我检查了该div并派生了color: black属性，但是我用color: green（到处都有color:green）覆盖了它，但结果仍然相同。为什么我会有奇怪的左侧和顶部黑色（深绿色）边框？

Answer 1

打开检查器（右键单击元素并选择检查），您将看到用户代理样式表（浏览器应用于元素的默认样式）：

hr {
    display: block;
    unicode-bidi: isolate;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

请注意浏览器应用的border-style: inset和border-width: 1px默认样式。

许多人使用某种reset.css或normalize.css（谷歌这些东西）来删除很多可能不需要的默认浏览器样式。

Answer 2

保持简单：

IDistributedCache

放置任意高度，您必须先将hr元素的基本 border 定义为 0 ，然后才能用于其他功能。

为什么<hr />有一个奇怪的黑色顶部边框？

2 个答案: