css中灰色线条怎么做 |css下虚线

一、使用border属性

border-bottom: 1px solid #ccc;

此方法是使用border属性，只需要在需要生成灰色线条的元素中添加border-bottom属性即可。其中1px是线条的宽度，solid表示线条的类型是实线，#ccc是灰色的RGB值。可以根据实际需要进行修改。

二、使用hr标签

hr {
border: none;
border-top: 1px dashed #999;
height: 0;
margin-top: 10px;
margin-bottom: 10px;
}

此方法是使用hr标签，在CSS中为其添加样式。其中border:none是去除默认的线条，border-top是添加灰色的上边框，dashed表示线条类型为虚线，#999是灰色的RGB值。height为0是为了去除默认线条的高度，margin-top和margin-bottom是为了控制hr标签与上下元素的间距。

三、使用::before和::after伪元素

.line::before{
content: "";
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 0;
}

此方法是使用CSS中的::before伪元素，为其添加样式。其中content: “”是必须的，通过设置display:block使得伪元素变成块级元素，width:100%是为了让线条宽度占满父元素，height:1px是线条的高度，background:#ccc是灰色的RGB值，position:absolute是为了定位，top:0表示在父元素的顶部。::after伪元素同理。

综上所述，以上几种方法都可以实现CSS中灰色线条的效果，使用哪种方法可以根据实际需要进行选择。