在很多網(wǎng)站的登錄、注冊(cè)、搜索等功能中，都有輸入框和橫線的設(shè)計(jì)。那么如何實(shí)現(xiàn)輸入框橫線的css呢？下面將介紹一些方法和技巧。

/* 實(shí)現(xiàn)下劃線的方法 */
/* 方法一：使用border-bottom實(shí)現(xiàn) */
input {
border: none;
border-bottom: 2px solid #333;
outline: none; /* 去除聚焦時(shí)的外邊框 */
}
/* 方法二：使用偽類實(shí)現(xiàn) */
input {
border: none;
outline: none; /* 去除聚焦時(shí)的外邊框 */
}
input::after {
content: '';
display: block;
width: 100%;
height: 2px;
background: #333;
}
/* 方法三：使用box-shadow實(shí)現(xiàn) */
input {
border: none;
outline: none; /* 去除聚焦時(shí)的外邊框 */
box-shadow: inset 0 -2px 0 #333;
}

以上是實(shí)現(xiàn)下劃線的三種方法，其中使用偽類實(shí)現(xiàn)的方法可以更多地進(jìn)行修改和定制，如修改下劃線的長度、顏色、粗細(xì)等，而使用box-shadow實(shí)現(xiàn)的方法則可以模擬更加逼真的立體效果。

除了實(shí)現(xiàn)下劃線，我們還可以在輸入框的聚焦?fàn)顟B(tài)下添加一些特效，比如改變邊框顏色、添加陰影等。

/* 實(shí)現(xiàn)輸入框聚焦時(shí)的特效 */
input:focus {
border-color: #666;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

輸入框橫線css的實(shí)現(xiàn)方法有很多，具體使用哪一種，取決于設(shè)計(jì)需求和個(gè)人喜好。