在網(wǎng)頁設計中，頂部線是一個非常常見的元素，用來增強網(wǎng)頁的整體美感和一致性。CSS提供了多種方法來實現(xiàn)頂部線，本文將介紹幾種方法。

/* 使用border屬性 */
.top-line {
border-top: 1px solid #ccc;
padding-top: 10px;
}
/* 使用box-shadow屬性 */
.top-line {
box-shadow: 0px 1px 0px #ccc;
}
/* 使用偽元素 */
.top-line::before {
content: "";
display: block;
height: 1px;
background-color: #ccc;
margin-bottom: 10px;
}

以上三種方法各有優(yōu)缺點，使用border屬性可以輕松實現(xiàn)線條，同時可以設置padding來控制線條的位置。使用box-shadow可以讓線條看起來更加自然，但是不能設置線條粗細。使用偽元素可以實現(xiàn)非常靈活的線條，但是需要一些額外的CSS。

除了以上三種方法，還可以使用CSS3中的linear-gradient屬性來創(chuàng)建漸變線條。例如：

.top-line {
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%, transparent 100%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}

這種方法可以創(chuàng)建出非常靈活的線條，可以控制漸變的起始和結(jié)束顏色，以及顏色之間的比例等等。

綜上所述，根據(jù)不同的需求和場景，使用不同的方法來實現(xiàn)頂部線條。