css布局小竖线 |css背景透明内容不透明

.line {
height: 20px; /*或者设置其他高度*/
width: 1px;
background: #000;
display: inline-block; /*靠左对齐*/
}

代码中，大家首先定义了一个类名为 line 的样式，然后通过给 height 设置一个合适的高度以及 width 设置为 1px，就可以实现一个细小的竖线了。接着大家需要用 background 属性设置竖线的颜色，这里大家设置为 #000，表示黑色。最后通过 display 属性和 inline-block 的值，将竖线靠左对齐。

使用此方法可以轻松地创建一个小竖线，如果需要创建更大的竖线，可以将 height 调大即可。另外，如果需要生成一个竖向分割线，可以通过向其父元素添加 CSS 样式来实现：

.container {
display: flex;
justify-content: space-between;
height: 500px;
}
.container >div {
width: calc(50% - 1px);
background: #fff;
}
.container >div + div {
border-left: 1px solid #000;
}

对于上述代码，大家首先定义了一个容器类名为 container 的样式，并使用了 flex 布局，将子元素平均分配在页面的两边。然后通过设置子元素 div 的宽度为 50% 减去 1px，再通过 background 属性将其背景色设置为白色。最后通过 div + div 选择器以及 border-left 属性，将第二个子元素的左边框设置为黑色的 1px 竖线。

使用以上方法，大家就可以在网页布局中简单、灵活地创建竖线了。