如何优雅地设置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像素的间距。