第14篇：边框、圆角与轮廓

第14篇：边框、圆角与轮廓

边框和圆角是 UI 设计中最常用的视觉元素之一。从简单的实线边框到复杂的图片边框，从圆角矩形到完美的圆形，CSS 提供了丰富的工具来创造各种边框效果。本篇将深入讲解 border 系列属性和 outline 的区别与应用。

学习目标

• 掌握 border 的简写与拆分属性
• 理解 border-radius 的语法，能画出各种圆角形状
• 掌握 border-image 的基本用法
• 理解 outline 与 border 的本质区别
• 学会用 border 画三角形、箭头等几何图形
• 了解 CSS 逻辑边框属性（inline/block-start/end）

核心知识点

一、border 基础

三要素写法

.box{/* 简写：宽度 样式 颜色 */border:2px solid #333;/* 拆分写法 */border-width:2px;border-style:solid;border-color:#333;}

border-style 取值：

单边控制

.box{border-top:2px solid #333;border-right:1px dashed #999;border-bottom:2px solid #333;border-left:1px dashed #999;}/* 或 */.box{border-width:2px 1px 2px 1px;/* 上 右 下 左 */border-style:solid dashed solid dashed;border-color:#333 #999 #333 #999;}

二、border-radius 圆角

基础语法

/* 四个角相同 */.rounded{border-radius:8px;}/* 四个角不同 */.mixed-radius{border-radius:8px 16px 24px 32px;/* 左上 右上 右下 左下 */}/* 椭圆角：水平半径 / 垂直半径 */.ellipse-radius{border-radius:50px / 20px;}

各种形状

/* 圆角矩形 */.rounded-card{border-radius:12px;}/* 圆形 */.circle{width:100px;height:100px;border-radius:50%;/* 或 9999px */}/* 胶囊形 */.pill{border-radius:9999px;/* 高度的一半以上的值 */padding:8px 24px;}/* 半圆 */.semicircle{width:100px;height:50px;border-radius:50% 50% 0 0 / 100% 100% 0 0;}/* 叶子形状 */.leaf{border-radius:0 50% 0 50%;}

复杂圆角

/* 现代语法：每个角可以有两个半径 */.complex{border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;/* 左上 右上 右下 左下 / 垂直半径 */}/* 或使用独立属性 */.individual{border-top-left-radius:20px 10px;border-top-right-radius:30px;border-bottom-right-radius:40px 20px;border-bottom-left-radius:10px;}

三、用 border 画三角形

利用边框的拼接原理，可以画出各种方向的三角形：

/* 上三角形 */.triangle-up{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:80px solid #4a90d9;}/* 下三角形 */.triangle-down{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-top:80px solid #4a90d9;}/* 左三角形 */.triangle-left{width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-right:80px solid #4a90d9;}/* 右三角形 */.triangle-right{width:0;height:0;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:80px solid #4a90d9;}

原理图解：

/\ / \ ← 上边框为透明，下边框为蓝色 / \ 左右边框也为透明 /______\ \ / \ / \ / \/

箭头气泡：

.bubble{position:relative;padding:16px;background:#f5f5f5;border-radius:8px;}.bubble::after{content:"";position:absolute;bottom:-10px;left:30px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #f5f5f5;}

四、border-image 图片边框

.image-border{border:30px solid transparent;border-image:url("border.png")30 round;/* 图片 切片 填充方式 */}

填充方式：

渐变边框（配合 border-image）：

.gradient-border{border:3px solid transparent;border-image:linear-gradient(135deg,#667eea,#f093fb)1;}

⚠️border-image不支持border-radius，如果需要圆角渐变边框，需要用其他技巧（如伪元素）。

五、outline 轮廓

outline与border很相似，但有几个关键区别：

/* 聚焦时的轮廓 */input:focus{outline:2px solid #4a90d9;outline-offset:2px;/* 轮廓与元素的距离 */}/* 去除轮廓（不推荐用于可交互元素） */button{outline:none;}/* 更好的做法：自定义聚焦样式 */button:focus-visible{outline:2px solid #4a90d9;outline-offset:2px;}

六、CSS 逻辑边框属性

支持不同书写方向的逻辑属性：

/* 物理属性 */.box{border-top:1px solid #333;border-bottom:1px solid #333;}/* 逻辑属性（推荐用于国际化） */.box{border-block-start:1px solid #333;/* 块起始边 */border-block-end:1px solid #333;/* 块结束边 */border-inline-start:1px solid #333;/* 行起始边 */border-inline-end:1px solid #333;/* 行结束边 */}

在水平书写模式下（中文、英文）：

• block-start=top
• block-end=bottom
• inline-start=left
• inline-end=right

动手练习

练习 1：各种圆角形状

实现以下形状：

• 完美圆形（头像）
• 胶囊形按钮
• 对话气泡（一个角特别大）
• 叶子形状

练习 2：纯 CSS 箭头

用 border 技巧实现：

• 向上的工具提示箭头
• 导航下拉菜单的小三角
• 步骤指示器中的连接箭头

练习 3：卡片边框效果

实现以下效果：

• 左侧彩色边框（4px 蓝色左边框）
• 渐变边框
• 带虚线边框的票据样式

常见误区 ⚠️

速查卡片 📋

border 简写

border:宽度 样式 颜色;

圆角形状速查

border-radius:8px;/* 小圆角 */border-radius:12px;/* 卡片圆角 */border-radius:50%;/* 圆形（需宽高相等） */border-radius:9999px;/* 胶囊形 */border-radius:0 50% 0 50%;/* 叶子形 */

三角形代码

.triangle-up{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:80px solid #333;}

outline 聚焦样式

:focus-visible{outline:2px solid #4a90d9;outline-offset:2px;}

扩展阅读

• MDN: border
• MDN: border-radius
• MDN: outline
• MDN: border-image
• CSS-Tricks: The Shapes of CSS（英文）

📌配套代码：

• CODE/14/border-shapes.html — 圆角与三角形形状演示
• CODE/14/border-advanced.html — 图片边框与轮廓演示

🎉下一步：进入 第15篇：阴影与视觉效果，学习 box-shadow 和滤镜效果。