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

Question

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

从以下代码生成：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你仔细观察，你可以看到：before元素的颜色实际上不是黑色，它是＃77777。

这个问题让我的同事和我难以理解。它在浏览器中是一致的。任何人都可以提供一些见解吗？

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

通过将top: -17px添加到:after元素，可以在上面的代码段中实现所述效果。