为什么这个 CSS 箭头边框不是黑色的？

Question

我从另一个 Stack Overflow post 中获取了一个工具提示，并稍作修改。它看起来像这样：

由以下代码生成：

.up-arrow {
    display: inline-block;
    position: relative;
    border: 1px solid black;
    text-decoration: none;
    border-radius: 2px;
    padding: 20px;
    margin-top: 50px;
}
.up-arrow:before {
    content: '';
    display: block;  
    position: absolute;
    left: 140px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: black;
} 

.up-arrow:after {
    content: '';
    display: block;  
    position: absolute;
    left: 141px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: white;
}

<div href="#" class="up-arrow">Button with Up Arrow</div>

如果你仔细观察，你会发现 :before 元素的颜色实际上不是黑色，而是#77777。

这个问题让我的同事和我都难住了。它在浏览器中是一致的。谁能提供一些见解？

Answer 1

.up-arrow {
    display: inline-block;
    position: relative;
    border: 1px solid black;
    text-decoration: none;
    border-radius: 2px;
    padding: 20px;
    margin-top: 50px;
}
.up-arrow:before {
    content: '';
    display: block;  
    position: absolute;
    left: 140px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: black;
} 

.up-arrow:after {
    content: '';
    display: block;  
    position: absolute;
    left: 141px;
    top: -17px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: white;
}

<div href="#" class="up-arrow">Button with Up Arrow</div>

你的问题是抗锯齿，它试图让你的线条看起来平滑。您可以通过将 :after 元素移动到离对角线更远 1 个像素左右的位置使它变成真正的黑色，这样线条会更粗并且抗锯齿只会影响外部像素而不影响外部像素内部像素，但这是否可取是另一个问题。看起来有点奇怪。

上述效果是通过在 :after 元素中添加 top: -17px 实现的。

为什么这个 CSS 箭头边框不是黑色的？

Why is this CSS arrow border not black?

css

border

tooltip

css-selectors