CSS: CSS 边框与圆角
边框（border）和圆角（border-radius）是让元素"有型"的重要属性。边框可以给元素添加轮廓线，圆角则让生硬的直角变得柔和。
边框属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
border-width |
1px, 2px, medium, thick |
边框宽度 |
border-style |
solid, dashed, dotted, double, none |
边框样式 |
border-color |
#333, red, transparent |
边框颜色 |
border |
2px solid #333 |
简写属性（宽度+样式+颜色） |
border-top/right/bottom/left |
1px dashed red |
单独设置某一边 |
border-radius |
4px, 50%, 10px 20px |
圆角半径 |
border-collapse |
collapse, separate |
表格边框合并模式 |
1. 边框属性 border
注意： 本页部分代码块使用
<style>、<div>前缀编码，实际预览时替换为<标签。
(1) 边框的三个要素
每条边框都有三个要素：宽度（width）、样式（style）、颜色（color）。
▶ 示例
HTML
<style>
.box {
border-width: 2px;
border-style: solid;
border-color: #333;
}
/* 简写 */
.box {
border: 2px solid #333;
padding: 16px;
background: #f9f9f9;
}
</style>
<div class="box">2px实线边框，包裹整个盒子</div>
(2) border-style 的样式值
▶ 示例
HTML
<style>
.solid {
border-style: solid; /* 实线 */
}
.dotted {
border-style: dotted; /* 点线 */
}
.dashed {
border-style: dashed; /* 虚线 */
}
.double {
border-style: double; /* 双实线 */
}
.groove {
border-style: groove; /* 凹槽线 */
}
.ridge {
border-style: ridge; /* 凸脊线 */
}
.inset {
border-style: inset; /* 内嵌效果 */
}
.outset {
border-style: outset; /* 外凸效果 */
}
.none {
border-style: none; /* 无边框 */
}
</style>
<div class="solid">实线边框</div>
<div class="dotted">点状虚线边框</div>
<div class="dashed">短横虚线边框</div>
<div class="double">双实线边框</div>
<div class="groove">凹槽效果边框</div>
<div class="ridge">脊状凸起边框</div>
<div class="inset">内嵌凹陷边框</div>
<div class="outset">外突凸起边框</div>
<div class="none">无</div>
最常用的就是 solid、dashed、dotted 和 none。
(3) 指定某个方向的边框
▶ 示例
HTML
<style>
.box {
border-top: 2px solid red;
/* 上边框 */
border-right: 3px dashed blue;
border-bottom: 4px dotted green;
border-left: 1px solid orange;
}
/* 或者使用单独属性 */
.box {
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
<span class="border-sol">实线边框</span>
<span class="border-dashed">虚线边框</span>
<span class="border-dotted">点状装饰</span>
<span class="border-sol">实线边框</span>
(4) 边框简写顺序
CSS
border: width style color;
/* border: 2px solid #333; */
三个值顺序可以调换，但建议统一为 width style color。
2. 圆角属性 border-radius
border-radius 让元素的四个角变得圆润：
▶ 示例
HTML
<style>
.box {
border-radius: 10px; /* 四个角都是10px圆角 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
(1) 指定某个角
▶ 示例
HTML
<style>
.box {
border-top-left-radius: 10px; /* 左上角 */
border-top-right-radius: 10px; /* 右上角 */
border-bottom-right-radius: 10px; /* 右下角 */
border-bottom-left-radius: 10px; /* 左下角 */
}
/* 简写：顺时针顺序 */
.box {
border-radius: 10px 20px 30px 40px;
/* 左上 右上 右下 左下 */
}
</style>
<div class="box">这是一个盒子元素，用于展示盒模型相关样式效果</div>
(2) 制作圆形
当 border-radius 的值大于等于元素宽高的一半时，会变成圆形：
▶ 示例
HTML
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%; /* 或者 50px */
> **✅ 画圆技巧：** 把 `border-radius` 设为 50%（或者宽高的一半），正方形元素就会变成圆形。这是做头像、圆按钮最常用的方法。
background: #3498db;
}
</style>
<div class="circle">圆形元素</div>
(3) 胶囊形
▶ 示例
HTML
<style>
.pill {
width: 200px;
height: 50px;
border-radius: 25px; /* 高度的一半 */
background: #e74c3c;
}
</style>
<div class="pill">胶囊形状元素</div>
3. 边框与背景的关系
- 背景颜色和背景图像会延伸到边框区域（但不覆盖边框样式本身）
- 默认情况下背景延伸到
border的外边缘 - 可以通过
background-clip属性控制背景的绘制范围
4. outline（轮廓线）
outline 和 border 类似，但有区别：
▶ 示例
HTML
<style>
.input:focus {
outline: 2px solid blue; /* 输入框聚焦时的外轮廓 */
outline-offset: 2px; /* 轮廓与边框的距离 */
}
</style>
<input class="input">输入框</input>
<span class="border-sol">实线边框</span>
outline vs border 的区别：
outline不占据空间，不会影响布局outline不一定是矩形（在border-radius下会自动适配）outline不能分别设置四个边
❓ 常见问题
Q border-radius: 50% 和 999px 有什么区别？
A 50% 是相对于元素宽高的百分比——正方形变圆，长方形变椭圆。999px 是一个很大的固定值，只要大于宽高的一半，四个角都会变成完全圆润的"胶囊"形状。正方形时两者效果一样，长方形时区别明显。
Q outline 和 border 可以同时用吗？
A 可以。outline 不占用空间（不影响元素大小），border 占用空间。outline 常用在
:focus 状态，给键盘用户提供焦点指示。还可以用 outline-offset 控制 outline 和元素边界的距离。Q 只给一个角设置圆角怎么做到？
A 用
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 分别控制四个角。或者用简写 border-radius: 左上 右上 右下 左下;。📖 小节
- 边框和圆角是让页面元素"有型"的基础工具
border控制元素的轮廓线，border-radius让直角变圆润- 掌握组合使用技巧（比如
border-radius: 50%做圆形头像、border: none去掉默认边框），在实际开发中非常实用
📝 作业
- 创建一个卡片，使用边框和圆角让它看起来像一个"名片"——有边框、有圆角、有内边距。
- 使用
border-radius: 50%做一个圆形头像框。 - 使用不同方向的边框组合，制作一个带"下划线"的菜单项（只有底部有边框）。
- 尝试使用
dashed和dotted边框样式，看看它们在实际效果中的区别。
