企业官网建设流程全解析

• 前端
• 文档
• 教程

本篇指南围绕 You-need-to-know-css 开源仓库中的 切角效果文档（英文版 bevel-corners.md，中文版 zh-cn/bevel-corners.md）展开，系统讲解"切角"（Cutout corners）这一经典 CSS 视觉技巧的四种纯 CSS 实现方案：linear-gradient直角切角、radial-gradient弧形切角、内联 SVG +border-image以及clip-path多边形裁剪。读完本文，你将掌握每种方案的完整可运行代码、底层原理、适用场景与取舍建议，并能在无需任何图片素材的前提下直接落地到自己的项目中。

切角效果是什么

"切角"指的是元素的一个或多个角被"切掉"的视觉形态，常见于标签页（Tab）、卡片、优惠券、徽章等 UI 组件。在 You-need-to-know-css 仓库中，切角效果归属于常见形状（Shapes）分类，与圆与椭圆、平行四边行、简易饼图、其他多边形并列（见 _sidebar.md）。整个仓库的理念是"减少代码重复、保持 DRY"，而切角效果的四种方案恰好展示了同一个视觉目标如何用不同 CSS 特性达成，是理解渐变（gradient）与clip-path底层行为的绝佳示例。

演示环境与公共样式

仓库中每个技巧文档都通过<vuep template="#bevel-corners"></vuep>挂载了一个可实时编辑、实时预览的交互式示例，其运行依赖在 index.html 中加载的vue.min.js与vuep.min.js，布局样式由 assets/vuep.css 与 assets/index.css 提供。示例使用的主色调#b4a078并非随意选取——根据仓库 简介文档 说明，全站示例配色统一参考网易严选设计规范，以保证演示观感一致。

四个示例共用的基础样式如下（原文档 bevel-corners.md）：

main{ width: 100%; padding: 60px 0; } .bevel-corners{ display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; margin-bottom: 20px; } .bevel-corners > div{ width: 249px; color: #FFF; padding: 1.2em 1.8em; hyphens: auto; text-align: justify; background: #b4a078; }

可以看出，四个方案作用于同一个尺寸（249px 宽）、同一种内容排版（两端对齐文本）的容器上，唯一差异是各自的背景/边框/裁剪写法。下面逐一拆解。

方案一：linear-gradient 多背景直角切角

这是最经典、兼容面最广的切角写法。核心思路是：把元素的背景拆成四块，每块是一个指向特定角落的线性渐变，渐变从"透明"过渡到主题色，从而在角落形成三角形缺口。

.bevel-corners:nth-of-type(1) > div{ background: linear-gradient(45deg, transparent 12px, #b4a078 13px) bottom left, linear-gradient(135deg, transparent 12px, #b4a078 13px) top left, linear-gradient(-135deg, transparent 12px, #b4a078 13px) top right, linear-gradient(-45deg, transparent 12px, #b4a078 13px) bottom right; background-size: 51% 51%; background-repeat: no-repeat; }

原理拆解

• 四条渐变分别锚定在bottom left、top left、top right、bottom right四个角落；
• 每个渐变的旋转角恰好指向其所在角落的对角方向：左下角用45deg（从透明到颜色的过渡方向斜向右上），左上角用135deg，右上角用-135deg，右下角用-45deg；
• transparent 12px与#b4a078 13px之间只有 1px 的色标间隔，这是为了形成锐利的切角边线。切角尺寸即由 12px 这个数值控制，需要更大或更小的切口时直接调整该值即可；
• 关键细节是background-size: 51% 51%+background-repeat: no-repeat：四块背景各只占元素一半宽、一半高，且不重复平铺。51% 而非 50% 是为了让相邻的两块背景在中间略微重叠，从而避免因像素取整误差导致中心出现缝隙。

使用要点

• 该方案不依赖任何裁剪类属性，仅用背景图，因此不影响元素的盒模型、边框、阴影与事件区域，内容依旧完整铺满容器；
• 文字若直接压在渐变上，靠角落一侧的文本会与切口边缘冲突。实际项目中通常配合内边距或单独放置文本层来处理，示例中以padding: 1.2em 1.8em预留了空间；
• 想实现"只切两个角"（如只切左上、右下），删除对应方向的两条渐变即可。

方案二：radial-gradient 弧形切角

当切角不是直线而是向内凹陷的圆弧（如优惠券、代金券的镂空角）时，线性渐变就无能为力了，此时应改用径向渐变radial-gradient。仓库中的写法是四个角落各放一个圆形渐变：

.bevel-corners:nth-of-type(2) > div{ background: radial-gradient(circle at bottom left, transparent 15px, #b4a078 16px) bottom left, radial-gradient(circle at top left, transparent 15px, #b4a078 16px) top left, radial-gradient(circle at top right, transparent 15px, #b4a078 16px) top right, radial-gradient(circle at bottom right, transparent 15px, #b4a078 16px) bottom right; background-size: 51% 51%; background-repeat: no-repeat; }

原理拆解

• circle at bottom left表示以左下角为圆心绘制圆形渐变：transparent 15px意味着半径 15px 内完全透明，#b4a078 16px处立即变为主题色，同样只留 1px 的过渡带形成锐利弧线；
• 15px 就是内凹圆弧的半径，调整它即可改变凹陷深度；
• 与方案一相同，必须配合background-size: 51% 51%与background-repeat: no-repeat，让四个角落的圆弧背景各自独立、互不干扰。

与方案一的对照

这种"圆角内凹"手法与仓库中条纹背景文档里用radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 21px)实现优惠券顶部凹槽的思路完全同源，可见径向渐变是打造不规则卡片轮廓的核心工具。

方案三：内联 SVG + border-image 切角

第三种方案不再使用渐变，而是借助border-image引用一段内联的 SVG 图片作为边框切片，把"切角"画在边框上：

.bevel-corners:nth-of-type(3) > div{ padding: 0 9px; border: 18px solid transparent; border-image: 1 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%23b4a078"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/> </svg>'); background-clip: padding-box; }

原理拆解

• 边框声明为18px solid transparent，先撑出 18px 的透明边框区域；
• border-image: 1 url(...)中的数字1是切片（slice）比例：整张 3×3 的 SVG 被切成 9 宫格，四角与四边各自承担对应区域的绘制；
• 内联 SVG 是一个 3×3 像素、填充色为%23b4a078（即#b4a078的 URL 编码形式）的正八边形polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"。把三个角像素留空（透明），恰好形成与 45° 渐变相同的角部缺口；
• background-clip: padding-box让背景色只延伸到内边距区域，不渗透进边框，否则主题色背景会盖住边框里的透明角；
• 内边距改为0 9px（只保留水平方向），配合 18px 边框，在视觉上维持近似于前两个方案的留白比例。

使用要点

• 该方案的本质是"用图片资源描述切角形状"，因此 SVG 数据中的fill颜色与多边形顶点决定了切角外观，可扩展为任意颜色、任意角度的切角；
• 由于依赖border-image，它会占用边框盒模型，且不支持在边框上叠加半透明背景——这是它相比渐变方案的主要局限；
• data URI 形式无需额外请求，适合内联使用；若想复用同一形状，也可以将其抽取为独立的.svg文件再引用。

方案四：clip-path 多边形裁剪切角（推荐）

clip-path通过定义一个多边形裁剪区域，把元素渲染范围之外的像素直接裁掉，是语义最直接、代码最精简的切角方案，也是当前实现"切角"最主流的做法：

.bevel-corners:nth-of-type(4) > div{ clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); transition: 1s clip-path; } .bevel-corners:nth-of-type(4):hover > div{ clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%); }

原理拆解

• 常规状态下的polygon()依次声明了 8 个顶点，按顺时针方向勾勒出"八边形"轮廓：20px 0与calc(100% - 20px) 0是上边两端的起点，随后依次经过右上角100% 20px、右下角100% calc(100% - 20px)、底边两点与左下角、左上角0 20px，从而在四个角各切出 20px 的直边缺口；
• calc(100% - 20px)让切角尺寸可以随容器宽度自适应，无论元素多宽，切角始终保持 20px；
• 关键技巧：transition: 1s clip-path声明了对clip-path的过渡动画。hover 时将多边形退化为完整的矩形（首尾顶点重合的写法0 0, 0 0, 100% 0, 100% 0, ...只是为了让顶点数量保持一致），浏览器会在 1 秒内平滑地"补齐"四个切角；
• clip-path是在渲染阶段直接裁剪内容，因此被裁掉的部分不可见、不可点击，这与前三种方案"背景留白"的视觉效果本质不同——但换来的是无需任何背景魔法、任意多边形轮廓（星形、菱形等）都能直接表达。

使用要点

• 想调整切口大小，只需统一修改 8 个顶点中的20px与calc(100% - 20px)数值；
• 过渡动画要求过渡前后的polygon()顶点数量一致，否则浏览器无法插值，会退化为瞬切，这是仓库示例特意把 hover 状态也写成 8 个顶点的原因；
• 由于clip-path会裁剪掉超出区域的阴影与边框，若元素同时需要投影，需把投影放在外层容器或伪元素上——这与仓库中平行四边形文档使用伪元素承载背景的"内外分离"思路一致。

四种方案横向对比与选型建议

选型建议：追求兼容性、且元素还需要完整边框阴影时，优先考虑方案①/②的渐变写法；需要 hover 动效、或轮廓并非标准四角切角（如八角形、菱形）时，方案④的clip-path更合适；方案③适合团队已有 SVG 素材、希望用统一资源描述形状的情况。

浏览器支持与生产环境注意事项

仓库原文档（bevel-corners.md）在结尾通过 caniuse 数据页展示了css-gradients与css-clip-path两个特性在近几个版本周期内的支持情况，可以归纳为：

• 渐变（linear-gradient / radial-gradient）：作为 CSS3 特性，在现代浏览器中支持非常成熟，是四种方案中兼容性最好的选择；
• clip-path（polygon 语法）：在现代 Chrome、Firefox、Safari 与 Edge 中均得到支持，但早期版本需要-webkit-前缀，老旧浏览器（如 IE）不支持；
• border-image：同样属于 CSS3 特性，现代浏览器支持良好，但需要注意其与盒模型、背景裁剪的联动行为。

需要特别强调的是，根据仓库简介文档 的说明，文档内所有示例样式均未添加浏览器前缀做兼容，建议使用 Chrome、Firefox 等主流浏览器访问演示；在生产环境中应借助 Autoprefixer 之类的工具自动补全前缀后再发布。如果你的目标用户群覆盖较老的内核（如 IE 系、老旧 WebView），应优先采用渐变方案，并为clip-path提供降级背景。

进一步阅读

切角效果只是 You-need-to-know-css 中"常见形状"一节的组成部分，仓库内与之技术相关的文档可继续深入：

• 圆与椭圆（ellipse）：border-radius的斜杠语法与半圆、扇形变体；
• 平行四边形（parallelogram）：skewX变换与伪元素承载背景的方案，其中也包含clip-path菱形裁剪与 hover 过渡动画；
• 简易饼图（pie-chart）：linear-gradient与 SVGstroke-dasharray的进阶组合；
• 其他多边形（polygon）：利用border、transform与伪元素构造梯形、五角星、菱形、爱心等更多形状；
• 条纹背景（stripes-background）：径向渐变在"优惠券凹槽"上的同源应用。

这些文档与切角效果共同构成了"用纯 CSS 描述几何形态"的完整知识体系，值得按上述顺序逐一研读。

• 前端
• 文档
• 教程