CSS border-left / right无法正常显示

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>