前端開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到需要實(shí)現(xiàn)凹陷的線條的需求。這種效果通常可以通過(guò)css的box-shadow屬性來(lái)實(shí)現(xiàn)。

.box {
width: 200px;
height: 200px;
box-shadow: inset 0 0 10px rgba(0,0,0,.5);
border-radius: 10px;
}

上面的代碼可以實(shí)現(xiàn)一個(gè)帶有凹陷效果的矩形，其中inset表示陰影向內(nèi)，0 0表示陰影在水平和垂直方向上不偏移，10px表示陰影的模糊程度，rgba(0,0,0,.5)表示陰影的顏色為黑色，透明度為0.5。

當(dāng)然，我們也可以將凹陷線條放在一個(gè)容器里，并使用偽元素:before模擬出實(shí)線和虛線，代碼如下：

.box {
position: relative;
width: 200px;
height: 200px;
}
.box:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background-color: #000;
}
.box:after {
content: "";
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background-color: #000;
border-radius: 2px;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

其中:before和:after是偽元素，:before用于模擬出實(shí)線，而:after用于模擬出虛線。我們可以通過(guò)設(shè)置top屬性來(lái)控制虛線的位置以及間距，通過(guò)設(shè)置box-shadow屬性來(lái)優(yōu)化虛線的線條效果。

總之，學(xué)習(xí)css中凹陷線條的實(shí)現(xiàn)方法，對(duì)于我們的前端開(kāi)發(fā)工作會(huì)有很大的幫助。以上介紹的這兩種方法只是較為常見(jiàn)的兩種，大家可以靈活運(yùn)用css屬性來(lái)實(shí)現(xiàn)不同的效果。