CSS左右边框不正确显示

Question

*编辑

我把枪稍微跳了一下，造成了它的边界底部。

新问题：

可以消除边框的相框效果吗？

---

所以我在div上有以下CSS代码：

border-left: 5px solid #009933;

在Safari中显示正常：

但是在Firefox和Chrome中显示如下：

所以我想我的问题是，为什么Firefox和Chrome会以不同的方式显示它，以及如何使其看起来像Safari一样？

谢谢

Answer 1

不同浏览器的边框角的确切呈现方式有所不同。

使用粗边框，浏览器会尝试在边框之间建立对角线边界。 角落中的像素可以从边框之一获得颜色：

******************
+*****************
++****************
+++***************
++++
++++
++++

或其他边界：

+*****************
++****************
+++***************
++++**************
++++
++++
++++

不同的浏览器将使用这两种方法中的任一种，但是在元素的所有四个角上将使用不同的方法。 我曾经比较过不同浏览器的使用方式，似乎每个浏览器供应商似乎都选择了其他浏览器都没有使用的方法。

在您的情况下，Firefox和Chrome恰好使用水平边框颜色作为左下角的边界。

要使侧面边框在外部延伸，即：

++++******************
++++******************
++++******************
++++******************
++++
++++
++++
++++

您可以在另一个元素内部使用一个元素，并在外部元素上设置垂直边框，在内部元素上设置水平边框。

示例（带有夸张的边框宽度只是为了显示效果）：

 .outer { border: 10px #0c0; border-style: none solid; } .inner { border: 10px #ccc; border-style: solid none; } 

 <div class="outer"><div class="inner">Demo</div></div>