第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 取值值效果none无边框solid实线dashed虚线dotted点状线double双线groove3D 凹槽ridge3D 凸槽inset内嵌outset外凸单边控制.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;/* 图片 切片 填充方式 */}填充方式值说明stretch拉伸填充默认repeat平铺填充可能裁剪round平铺填充调整大小以完整显示space平铺填充均匀分布渐变边框配合 border-image.gradient-border{border:3px solid transparent;border-image:linear-gradient(135deg,#667eea,#f093fb)1;}⚠️border-image不支持border-radius如果需要圆角渐变边框需要用其他技巧如伪元素。五、outline 轮廓outline与border很相似但有几个关键区别特性borderoutline占据空间✅ 是影响布局❌ 否不占据空间单边设置✅ 可以❌ 不可以只能统一设置圆角✅ border-radius❌ 无圆角有 outline-radius 但支持差位置边框内部边框外部用途装饰聚焦提示、调试/* 聚焦时的轮廓 */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-starttopblock-endbottominline-startleftinline-endright动手练习练习 1各种圆角形状实现以下形状完美圆形头像胶囊形按钮对话气泡一个角特别大叶子形状练习 2纯 CSS 箭头用 border 技巧实现向上的工具提示箭头导航下拉菜单的小三角步骤指示器中的连接箭头练习 3卡片边框效果实现以下效果左侧彩色边框4px 蓝色左边框渐变边框带虚线边框的票据样式常见误区 ⚠️误区真相“border-radius: 50%和9999px一样”对于正方形一样对于长方形50%是椭圆9999px是胶囊形“outline和border可以互相替代”不能outline 不占据空间、不能单边设置、不支持圆角“三角形可以用border画也可以用其他方式”是的现代更推荐用clip-path: polygon()或 SVG“border-image支持border-radius”不支持两者不能同时使用“border: none和border: 0一样”效果相同但border: 0更明确地移除了边框宽度“outline-offset可以为负值”可以负值会让轮廓向元素内部收缩“逻辑边框属性只适用于 RTL 语言”在任何方向变化时都有用包括垂直书写模式“所有浏览器都支持逻辑边框属性”现代浏览器支持良好但旧版浏览器需要回退速查卡片 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: borderMDN: border-radiusMDN: outlineMDN: border-imageCSS-Tricks: The Shapes of CSS英文配套代码CODE/14/border-shapes.html — 圆角与三角形形状演示CODE/14/border-advanced.html — 图片边框与轮廓演示下一步进入 第15篇阴影与视觉效果学习 box-shadow 和滤镜效果。