CSS是一種用于網站設計和開發的語言，它可以讓開發者在網頁上實現各種美麗的效果。你是否曾經想過在網頁上畫一條帶圓的線？下面就讓我們一起來看看如何實現吧！

.line{
width: 200px; /*寬度*/
height: 2px; /*高度*/
border-radius: 1px; /*圓角半徑*/
background-color: #333; /*線條顏色*/
position: relative; /*相對定位*/
margin-top: 30px; /*上邊距*/
}
.line:before,
.line:after{
content: "";
position: absolute; /*絕對定位*/
width: 10px; /*圓的直徑*/
height: 10px; /*圓的直徑*/
border-radius: 50%; /*將矩形變成圓形*/
top: -4px; /*上方偏移量*/
background-color: #333; /*圓的顏色*/
}
.line:before{
left: -5px; /*左側的偏移量*/
}
.line:after{
right: -5px; /*右側的偏移量*/
}

在上述代碼中，我們給帶圓的線制定了一些屬性：

• width：線條的寬度。
• height：線條的高度。
• border-radius：圓角半徑，用于使線條兩端變為圓形。
• background-color：線條的顏色，可以根據自己的需求來修改。
• position：相對定位，用于讓線條處于相對位置。
• margin-top：線條上邊距的大小。

接下來，我們在線條的前面和后面添加了兩個圓點，用于裝飾線條：

• content：添加圓點的偽元素。
• position：絕對定位，用于將圓點放到線條的兩端。
• width 和 height：圓點的大小。
• border-radius：將矩形變成圓形。
• top：讓圓點偏移至線條之外。
• background-color：圓點的顏色。

通過這些CSS屬性的應用，我們成功地實現了帶圓的線條效果，美觀大方，增強網頁的視覺效果。