CSS3線條特效是一種用于網頁設計的技術，它可以幫助我們創造出更加豐富多彩的線條效果，讓網頁更加生動有趣。

/* 以下演示樣式代碼 */
.line {
position: relative;
width: 200px;
height: 2px;
background-color: #000;
}
.line::after {
content: "";
position: absolute;
top: -4px;
left: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
box-shadow: 0px 0px 0px 4px #fff;
}
.line::before {
content: "";
position: absolute;
bottom: -4px;
right: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
box-shadow: 0px 0px 0px 4px #fff;
}

下面是一些常見的CSS3線條特效：

一、垂直水滴效果

/* 以下演示樣式代碼 */
.vertical-droplet {
position: relative;
width: 2px;
height: 200px;
margin: 100px auto 0;
background-color: #000;
}
.vertical-droplet::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
box-shadow: 0px 0px 0px 4px #fff;
transform: translateY(-50%);
}
.vertical-droplet::after {
content: "";
position: absolute;
bottom: -4px;
right: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #000;
box-shadow: 0px 0px 0px 4px #fff;
transform: translateY(50%);
}

二、斜向陰影效果

/* 以下演示樣式代碼 */
.slanted-shadow {
position: relative;
width: 200px;
height: 50px;
margin: 100px auto 0;
background-color: #000;
box-shadow: 10px 10px 0px #fff, 20px 20px 0px #000;
}

三、虛線效果

/* 以下演示樣式代碼 */
.dashed-line {
width: 100%;
height: 5px;
margin: 0 auto;
border-bottom: 2px dashed #000;
}

以上是一些簡單的CSS3線條特效示例，我們可以根據需要自行修改樣式實現更加豐富的效果。