目录
[第一章 效果以及思路](#第一章 效果以及思路)
[第二章 核心重点：background 之 radial-gradient（径向渐变）详解](#第二章 核心重点：background 之 radial-gradient（径向渐变）详解)
[2.1 radial-gradient 基本概念](#2.1 radial-gradient 基本概念)
[2.2 抗锯齿技巧](#2.2 抗锯齿技巧)
[第三章 源码](#第三章 源码)
第一章 效果以及思路
- 需求：实现了一款红色倾斜按钮，按钮边角呈现非对称圆角，左右两侧有自然的圆弧补位，文字保持水平规整不跟随按钮倾斜，整体视觉流畅无生硬感，摆脱了传统矩形按钮的单调。
- 整体思路：整体分为「基础样式重置」「布局居中」「按钮核心样式」「伪元素补位」「文字还原」五个部分：
- 样式重置：通过
*选择器清除浏览器默认的margin和padding，避免样式干扰； - 布局居中：利用
flex布局让按钮在页面水平居中，顶部留出间距保证视觉舒适； - 按钮主体：
.skew-btn通过transform: skew(-20deg)实现整体倾斜，设置非对称圆角border-radius: 15px 0 15px 0和背景色； - 圆弧补位：通过
::before和::after伪元素填补倾斜后按钮两侧的边角空缺，形成完整圆弧； - 文字还原：用
span包裹文字并通过transform: skew(20deg)反向倾斜，抵消父元素的倾斜效果，保证文字水平可读。
- 重点 ：伪元素的
background属性（径向渐变radial-gradient）是实现圆弧补位的关键，而抗锯齿技巧则是保证视觉质感的核心，接下来展开详细解析。
第二章 核心重点：background 之 radial-gradient（径向渐变）详解
2.1 radial-gradient 基本概念
- 与常用的linear-gradient（线性渐变，沿直线扩散）不同，radial-gradient是从一个指定中心点向外围扩散形成的渐变效果，默认呈现椭圆形状，可通过参数自定义为圆形，常用来实现圆形、圆弧、光晕等视觉效果。
- 4 个核心参数，逐一解析：
css
background: radial-gradient(circle at 0 0, transparent 20px, #ff4d4f 21px);circle：指定径向渐变的形状为「圆形」。如果不指定该参数，默认是「椭圆」，这里需要圆形来匹配按钮的圆角弧度，保证补位效果自然，避免椭圆带来的变形感。at 0 0：指定径向渐变的「中心点位置」，语法格式为at 水平位置 垂直位置（支持像素、百分比、关键字如left/top）。这里0 0对应伪元素的左上角，结合::before的定位bottom: 0; left: -19px;，刚好对应按钮左侧下方的边角补位区域；同理，::after中的at 100% 100%对应伪元素的右下角，匹配按钮右侧上方的补位区域。transparent 20px：第一个「渐变色标」，表示「从中心点到 20px 的范围内 ，填充完全透明色（transparent）」。色标格式为「颜色 值」，这里的20px是该颜色的终止位置，即 0px~20px 区间均为透明。#ff4d4f 21px：第二个「渐变色标」，表示「从距离中心点 21px 的位置开始 ，填充与按钮主体一致的红色（#ff4d4f）」。这里的21px是该颜色的起始位置，即 21px 及以后的区域均为红色。
2.2 抗锯齿技巧
（对比右边都写20px的效果，有很明显的锯齿效果）
- 关键技巧：相邻色标实现「无缝切割」
- 小编代码写了两个色标间距仅 1px（20px vs 21px），这并非真正的「渐变」（没有颜色过渡过程），而是利用
radial-gradient的色标特性实现了「圆形形状切割」：
- 0px~20px：透明区域，形成一个圆形「镂空」，刚好匹配伪元素width: 20px; height: 20px;的尺寸；
- 21px 及以后：红色填充区域，由于伪元素的宽高仅 20px，超出部分不会显示，最终呈现出「红色圆形拐角」；
- 伪元素通过position: absolute精确定位，与按钮主体无缝衔接，填补了倾斜后按钮边角的空缺，让整体形状更完整。
- 若两个色标设置为相同像素（如均为 20px）或间距过大（如 20px vs 25px） ，会出现明显的渐变过渡带，导致边缘模糊、锯齿感凸显。1px 的极小间距让颜色从透明直接切换到红色，几乎无过渡，边缘更锐利，有效减少模糊锯齿。
第三章 源码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: flex-start;
margin-top: 20px;
}
.skew-btn {
margin: auto;
position: relative;
display: inline-block;
padding: 12px 36px;
color: #fff;
font-size: 16px;
background-color: #ff4d4f;
border-radius: 15px 0 15px 0;
transform: skew(-20deg);
}
.skew-btn::before {
content: '';
position: absolute;
bottom: 0;
left: -19px;
width: 20px;
height: 20px;
background: radial-gradient(circle at 0 0,
transparent 20px,
#ff4d4f 21px);
}
.skew-btn::after {
content: '';
position: absolute;
top: 0;
right: -19px;
width: 20px;
height: 20px;
background: radial-gradient(circle at 100% 100%,
transparent 20px,
#ff4d4f 21px);
}
.skew-btn span {
display: inline-block;
transform: skew(20deg);
}
</style>
</head>
<body>
<div class="skew-btn"><span>❆VE❆</span></div>
</body>
</html>