如何優雅地設置CSS邊框和間距？

一、添加邊框

在CSS中，設置邊框的屬性為border。邊框的設置可以包括寬度、樣式和顏色。下面是一個添加紅色邊框的例子：

.box {
  border: 1px solid red;
}

上面的代碼表示在class為box的元素周圍添加寬度為1像素、樣式為實線、顏色為紅色的邊框。

另外，還可以分別設置邊框的上下左右，通過分別設置border-top、border-bottom、border-left和border-right來實現。例如：

.box {
  border-top: 1px solid red;
  border-left: 2px dotted blue;
  border-bottom: 3px double green;
  border-right: 4px dashed yellow;
}

上面的代碼表示在class為box的元素的上面添加寬度為1像素、樣式為實線、顏色為紅色的邊框，左邊添加寬度為2像素、樣式為點線、顏色為藍色的邊框，下面添加寬度為3像素、樣式為雙線、顏色為綠色的邊框，右邊添加寬度為4像素、樣式為虛線、顏色為黃色的邊框。

二、設置邊框弧度

CSS3提供了border-radius屬性來設置元素的邊框弧度，即讓元素擁有圓角。例如：

.box {
  border: 1px solid black;
  border-radius: 10px;
}

上面的代碼表示在class為box的元素周圍添加寬度為1像素、樣式為實線、顏色為黑色的邊框，並且讓元素的四個角都呈現10像素的圓角。

border-radius還可以設置不同的弧度值來實現不同的效果。例如：

.box {
  border: 1px solid black;
  border-top-left-radius: 20px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 15px;
}

上面的代碼表示在class為box的元素周圍添加寬度為1像素、樣式為實線、顏色為黑色的邊框，並且讓元素的左上角呈現20像素的圓角，右上角呈現10像素的圓角，左下角呈現5像素的圓角，右下角呈現15像素的圓角。

三、增加間距

在CSS中，可以使用padding和margin來增加元素內部和外部的間距。

padding屬性用於設置元素內部的間距，即元素內容和邊框之間的距離。例如：

.box {
  border: 1px solid black;
  padding: 10px;
}

上面的代碼表示在class為box的元素周圍添加寬度為1像素、樣式為實線、顏色為黑色的邊框，並且在元素內部添加10像素的間距。

margin屬性用於設置元素外部的間距，即元素和其它元素之間的距離。例如：

.box {
  border: 1px solid black;
  margin: 10px;
}

上面的代碼表示在class為box的元素周圍添加寬度為1像素、樣式為實線、顏色為黑色的邊框，並且讓元素和其它元素之間保留10像素的間距。

和邊框一樣，padding和margin屬性也可以分別設置上下左右的間距。例如：

.box {
  border: 1px solid black;
  padding: 10px 20px 15px 5px;
  margin: 5px 10px;
}

上面的代碼表示在class為box的元素周圍添加寬度為1像素、樣式為實線、顏色為黑色的邊框，並且讓元素的上面保留10像素的間距，右邊保留20像素的間距，下面保留15像素的間距，左邊保留5像素的間距，和其它元素之間保留上下5像素、左右10像素的間距。