CSS 3 - 使边框底部实线变细

Question

我想使用 CSS 3 画一条线并将其放置在元素下。显而易见的选择是边框底部，我将其设置为实心。结果线比我想要的要粗一点。有什么办法可以让它变薄吗？

编辑：

代码。 （抱歉，深夜马虎了）

    border-bottom: 1px solid #454;

Answer 1

请至少向我们展示您的代码。

你的 CSS 说什么？

1px 是可能的最小线，如下所示：

border-bottom: 1px solid #000;

但是您可以通过将边框颜色与背景颜色混合或使用虚线样式来给人一种变小的错觉。

border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px dotted #eee;
border-bottom: 1px solid #ccc;
/*etc...*/

可能看起来瘦了一点。

Answer 2

如果您使用 sass，您可以轻松使用 lighten 函数，例如

$color: #454;
lighten($color, 20%);

调整 % 以适应您想要的亮度。

Answer 3

border-bottom: 0.5px solid #ccc;

您可以使用

0.1  to 0.9

之间的值来使其更小

Answer 4

边框：1px实线； 边框底部：无；