我想要一个细的透明 div 行分隔符。如何在 CSS/html 中做到这一点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22181811/
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
I want a thin transparent div line separator. How to do this in CSS/html?
提问by user35698
Basically I want a line like the ones that separate posts on stackoverflow, only I want it vertical and to be a kind of "left border" that will be in a separate div to display links and content. So instead of making a big rectangle on the left side with links and text, I just want like a really thin, subtle gray line that goes all the way down the page.
基本上我想要一条像在stackoverflow上分开帖子的线，只有我想要它垂直并且是一种“左边框”，它将在一个单独的div中显示链接和内容。因此，与其在左侧制作一个带有链接和文本的大矩形，我只想要一条非常细的、微妙的灰色线，一直延伸到页面下方。
How would I go about doing this?
我该怎么做呢？
回答by bobek
You can do
你可以做
.some-class
{
border-left:1px solid #e2e2e2;
}
回答by mathius1
.thin_border {
border-left: 1px solid rgba(0, 0, 0, 0.3);
}
#mydiv {
height: 100%;
}
This will be a semi-transparent border on the left of the element.
这将是元素左侧的半透明边框。
The height depends on the height of the parent element.
高度取决于父元素的高度。
HTML:
HTML：
<div id="mydiv" class="thin_border">
content
</div>
回答by sidney
This is what I use to use:
这是我用来使用的：
HTML:
HTML:
<div class="vertical-line"></div>
CSS:
CSS:
.vertical-line {
width: 1px;
height: 300px;
background-color: #696969;
margin: 0 auto;
}
You can then customize the color, attributes, height design of this vertical line by modifying this .vertical-lineattribute.
然后您可以通过修改此.vertical-line属性来自定义此垂直线的颜色、属性、高度设计。
回答by Hefestus
Checking at the CSS of this page I could see that this is the CSS used:
检查此页面的 CSS，我可以看到这是使用的 CSS：
border-bottom: 1px solid #cccccc;
You could do something like this:
你可以这样做：
border-right: 1px solid #cccccc,
widht: 1px;
height: //depends on how tall you want it
