CSS 3 - 使边框底部实线更细
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9387962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS 3 - Make the border-bottom solid line thinner
提问by n_x_l
I want to draw a line using CSS 3 and place it under an element. The obvious choice for this is the border-bottom, which I set to solid. The resulting line is a little bit thicker than I want it. Is there a way I can make it thinner?
我想使用 CSS 3 画一条线并将其放在一个元素下。最明显的选择是边框底部，我将其设置为实心。结果线比我想要的粗一点。有什么办法可以让它变薄吗？
Edit:
编辑：
The code. (Sorry, late night sloppiness)
编码。（对不起，深夜邋遢）
border-bottom: 1px solid #454;
回答by Aron Cederholm
Please, at least show us your code.
请至少向我们展示您的代码。
What does your CSS say?
你的 CSS 怎么说？
1px is the smallest possible line, as in:
1px 是最小的行，如：
border-bottom: 1px solid #000;
but you can give the illusion of beeing smaller with blending the border colour to the background colour or using the dotted style.
但是您可以通过将边框颜色与背景颜色混合或使用虚线样式来给人一种变小的错觉。
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...*/
might look a little thinner.
可能看起来瘦一点。
回答by parkerproject
If you are using sass, you can easily use the lighten function e.g
如果你使用 sass，你可以很容易地使用 lighten 功能，例如
$color: #454;
lighten($color, 20%);
Adjust the % to suit how light you want it.
调整 % 以适合您想要的亮度。
回答by Deke
border-bottom: 0.5px solid #ccc;
border-bottom: 0.5px solid #ccc;
you can use values between 0.1 to 0.9to make it smaller
您可以使用之间的值0.1 to 0.9使其更小
