在頁(yè)面中，輸入框、鏈接、按鈕等元素都會(huì)有默認(rèn)的虛線邊框，這些邊框看起來(lái)并不美觀，給用戶帶來(lái)不良的體驗(yàn)，為了讓頁(yè)面更加美觀，我們需要去掉這些虛線邊框的樣式，本文將為大家介紹如何去掉css虛線邊框。

:focus {
outline: none;
}

以上代碼是去掉虛線邊框最常用的樣式方法，就是在元素獲取焦點(diǎn)的時(shí)候，將outline屬性設(shè)置為none，如下所示：

以上代碼是一個(gè)文本框的代碼，為了去掉邊框，我們只需要在css樣式表中加上上述代碼：

input:focus {
outline: none;
}

這里我們使用了偽類選擇器:focus，表示當(dāng)文本框獲得焦點(diǎn)的時(shí)候，才會(huì)執(zhí)行這個(gè)樣式。

另外，有些瀏覽器會(huì)自動(dòng)添加虛線邊框，即使我們?cè)赾ss中設(shè)置了outline: none，這時(shí)候我們需要加上一些額外的樣式，如下所示：

input[type="text"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
}

上述代碼中，我們使用了appearance屬性，它可以將元素的外觀改變?yōu)槲覀冏约憾x的樣式。而-webkit-appearance和-moz-appearance是webkit和firefox瀏覽器的私有屬性，用于兼容不同瀏覽器。

總結(jié)一下，去掉虛線邊框的主要方法是使用:focus偽類選擇器和outline:none樣式屬性，如果瀏覽器不兼容，可以使用appearance屬性和瀏覽器私有屬性進(jìn)行兼容性處理。