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中灰色線條的效果，使用哪種方法可以根據實際需要進行選擇。