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之间的值来缩小

CSS 3 - 使边框底部实线更薄

3 个答案: