今天我們來學(xué)習(xí)一下如何通過CSS3給網(wǎng)頁按鈕加邊框。 首先，在HTML中定義一個(gè)按鈕：

<button>點(diǎn)擊我</button>

接下來，在CSS樣式表中定義按鈕的邊框樣式，使用border屬性。例如，我們可以定義按鈕邊框?yàn)榧t色、2像素寬：

button {
border: 2px solid red;
}

此時(shí)，按鈕的邊框已經(jīng)出現(xiàn)。但是，如果我們想給按鈕加上圓角呢？可以使用border-radius屬性。例如，我們想讓按鈕四個(gè)角都變成圓角，可以寫成：

button {
border: 2px solid red;
border-radius: 10px;
}

border-radius的值可以是像素?cái)?shù)值，也可以是百分比。當(dāng)值為50%時(shí)，表示該邊角為半圓。 如果我們想讓按鈕的邊框看起來更豪華一點(diǎn)，可以使用box-shadow屬性。box-shadow可以添加一個(gè)或多個(gè)陰影效果。例如，我們可以為按鈕添加一個(gè)3像素寬、10像素高、帶有模糊效果的黑色陰影：

button {
border: 2px solid red;
border-radius: 10px;
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.5);
}

其中，box-shadow屬性的值由四個(gè)長(zhǎng)度值和一個(gè)顏色值組成。第一個(gè)長(zhǎng)度值代表陰影的水平偏移量，第二個(gè)長(zhǎng)度值代表陰影的垂直偏移量，第三個(gè)長(zhǎng)度值代表陰影的模糊半徑，第四個(gè)長(zhǎng)度值代表陰影的擴(kuò)散半徑。顏色值可以使用十六進(jìn)制代碼，也可以使用rgba()函數(shù)指定。 在實(shí)際應(yīng)用中，我們可以根據(jù)需要進(jìn)行組合使用。例如，下面的代碼為按鈕定義了2像素寬，紅色邊框，5像素半徑的圓角，以及一個(gè)帶有模糊效果的黑色陰影：

button {
border: 2px solid red;
border-radius: 5px;
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.5);
}

通過CSS3的這些屬性，我們可以給按鈕增加各種邊框效果，讓按鈕變得更加出色。