CSS 边框：border 样式与圆角

CSS 的 border 属性用于定义元素周围的边框，而 border-radius 属性则负责控制边框的圆角。掌握这两个属性是进行网页布局和 UI 设计的基础。本指南将详细介绍如何通过代码精确控制边框的粗细、样式、颜色以及圆角的弯曲程度。

1. 使用 Border 简写属性

border 属性是一个简写属性，允许在一个声明中设置边框的所有方面。这是最常用、最高效的定义方式。

打开你的 CSS 文件或 <style> 标签，输入以下代码格式：

.box {
    border: 1px solid #000000;
}

上述代码包含三个核心值，顺序至关重要：

1. 宽度：1px，定义边框的粗细。
2. 样式：solid，定义边框的外观（如实线、虚线）。
3. 颜色：#000000，定义边框的颜色。

注意：如果省略其中某个值（例如只写 border: solid;），浏览器将使用默认值（宽度通常为 medium，样式为 none，颜色为文本颜色）。

2. 设置边框样式

边框的样式决定了边框的视觉效果。即使设置了宽度和颜色，如果样式未设置或设置为 none，边框也不会显示。

修改 border-style 属性或简写属性中的样式值，常用的样式如下表所示：

尝试将样式更改为 dashed：

.box {
    border: 2px dashed #ff0000;
}

3. 独立控制单边边框

如果需要为元素的某一条边设置不同的样式，可以使用单边属性。这在制作底部横线或分割线时非常有用。

使用以下四个属性分别对应上、右、下、左边框：

1. border-top
2. border-right
3. border-bottom
4. border-left

编写代码，仅保留底部边框：

.header-title {
    border-bottom: 3px solid blue;
    /* 其他三边无边框 */
}

同样，你也可以单独设置某条边的样式、宽度和颜色，例如 border-bottom-color 或 border-top-width。

4. 设置基础圆角

border-radius 属性允许你为元素添加圆角，使矩形框变得圆润。

添加以下代码到你的选择器中：

.card {
    border: 1px solid #ccc;
    border-radius: 10px;
}

这表示元素四个角的曲率半径均为 10px。值越大，圆角越圆润。

5. 利用 Border-Radius 制作特殊形状

通过调整 border-radius 的数值和语法，可以制作出圆形或胶囊形等几何图形。

制作正圆形

要制作一个完美的正圆，确保元素是正方形（宽高相等），并将半径值设置为 50%。

.circle {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    border-radius: 50%;
}

制作胶囊形

要制作胶囊形（两端半圆的长条），确保元素有高度，且半径值设置为高度的一半，或者直接使用一个极大的数值（如 9999px）。

.pill {
    height: 40px;
    padding: 0 20px;
    background-color: #2ecc71;
    border-radius: 20px; /* 高度的一半 */
}

6. 精确控制每个角的圆角

如果需要为四个角设置不同的圆角大小，提供 1 到 4 个值，遵循顺时针旋转规则（左上 -> 右上 -> 右下 -> 左下）。

输入以下代码，实现左上角尖锐，其他角圆润的效果：

.odd-shape {
    border-radius: 0 20px 20px 20px;
}

此外，你还可以使用斜杠语法 / 分别设置水平和垂直半径，从而实现椭圆角效果。

编写如下代码：

.ellipse-corner {
    border-radius: 10px / 30px; /* 水平半径 10px，垂直半径 30px */
}

这意味着角的曲线在水平方向上比较平缓，而在垂直方向上比较弯曲。

7. 调试技巧：查看边框盒模型

在使用边框时，边框的宽度会增加元素的整体尺寸。

按下 F12 打开浏览器开发者工具。

选择 DOM 元素面板。

查看右侧的 Styles 面板或盒模型图示。你会发现，如果盒模型设置为 content-box（默认值），设定 width: 100px 和 border: 10px solid black 的元素，实际占据的水平空间将是 100px + 10px + 10px = 120px。

输入以下代码以避免布局错乱：

* {
    box-sizing: border-box;
}

设置后，border 和 padding 将包含在设定的 width 和 height 之内，元素的最终可视尺寸将严格等于 CSS 中设置的宽高值。