边框样式、宽度与颜色
使用简写和完整属性，以不同的样式、宽度和颜色应用边框。
边框样式、宽度与颜色 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
border 简写属性
border 简写属性可以同时设置四条边的宽度、样式和颜色。
<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>
border-style 值
必须设置 border-style，边框才会显示。可用值包括：
solid— 连续线dashed— 长虚线dotted— 圆点线double— 两条平行线groove/ridge/inset/outset— 3D 效果none— 无边框（默认值）
border-width
border-width 接受任意长度单位，也接受 thin、medium、thick 关键字。请使用数值以获得精确控制。
<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>
border-color
border-color 接受任意 CSS 颜色值，包括用于实现透明效果的 RGBA。currentColor 会继承文本颜色。
<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>
单独设置各边的边框
使用长写法属性为指定边设置边框：
<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>
border-radius
border-radius 将元素的角变圆。使用一个值可以统一设置圆角，使用最多四个值可以分别控制各个角。
<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">●</div>
<div class="custom">Custom</div>
椭圆形 border-radius
每个角的圆角半径可以使用两个值，并以 / 分隔，从而实现不对称的椭圆形圆角：
<div class="leaf"></div>
border-image
border-image 使用切片图像或渐变替换边框，从而实现装饰性边框：
<div class="fancy">Gradient border image</div>
outline 与 border
outline 在边框外绘制线条。与 border 不同，它不会影响布局或元素尺寸。它通常用于显示键盘焦点指示器。
<button class="focus-demo">Focused Button (demo)</button>
谨慎移除 outline
如果没有提供其他可见的焦点指示器，切勿移除 :focus 轮廓。移除焦点样式会损害键盘用户和屏幕阅读器用户的使用体验。
<button>Button without outline</button>
<a href="#">Link without outline</a>
用于表格的 border-collapse
对于 HTML 表格，border-collapse: collapse 会将相邻单元格的边框合并为一条线，使外观更加整洁。
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>30</td></tr>
</table>
快速检查
哪个 CSS 属性可以在不影响元素布局的情况下，在边框外绘制线条？
回顾
border 简写属性设置宽度、样式和颜色。border-radius 将角变圆。outline 独立于边框，不会影响布局，对于显示键盘无障碍焦点指示器至关重要。
常见问题解答
「边框样式、宽度与颜色」课时是免费的吗？
是的 — 「边框样式、宽度与颜色」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「边框样式、宽度与颜色」这节课中我会学到什么？
使用简写和完整属性，以不同的样式、宽度和颜色应用边框。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「边框样式、宽度与颜色」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。