纯 css 可用 border-radius、box-shadow 和 ::before/::after 伪元素实现斜切优惠券卡片：::before 在左上角绘浅色三角形，::after 在右下角反向绘制，均需 absolute 定位且 z-index 低于内容；金额用 tabular-nums 等宽数字、1.8em 字号、暖灰底色；响应式下伪元素尺寸用 vw/em，阴影用 clamp() 控制，打印时禁用 box-shadow。
直接用 border-radius + box-shadow + 伪元素就能做出主流优惠券卡片，不需要 SVG 或图片。
用 ::before 和 ::after 模拟斜角切口
真实优惠券常带左上/右下斜切边，纯 CSS 可用两个伪元素叠加实现：
-
::before绘制一个浅色三角形盖在左上角，模拟裁切效果 -
::after在右下角做同理处理，方向相反 - 两个伪元素都设
position: absolute，父容器必须是relative - 注意 z-index：伪元素要低于主卡片内容，否则文字被遮住
示例关键片段：
.coupon {
position: relative;
}
.coupon::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 0; height: 0;
border-top: 20px solid #f5f5f5;
border-right: 20px solid transparent;
}
让优惠金额突出显示的字体与颜色技巧
金额数字必须一眼可识别，但不能靠加粗硬怼：
- 用
font-variant-numeric: tabular-nums保证数字等宽，避免“1”和“8”宽度不一导致错位 - 金额区域单独包裹
<span class="amount"></span>，设font-size: 1.8em+line-height: 1避免行高撑开 - 背景色别用纯白，选
#fff9f0这类暖灰底，对比度够又不刺眼 - 禁用
text-shadow做“立体字”，移动端渲染模糊且语义错误
响应式断点下切口和阴影的适配问题
小屏时斜切边容易挤压变形，阴影也容易糊成一片：
- 在
@media (max-width: 480px)中把伪元素的border尺寸减半（比如从20px改为10px） -
box-shadow的blur值建议不超过8px，大屏可放宽到12px，但别写死，用clamp()更稳：box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08) - 切口位置固定用
px不可靠，改用vw或em单位（如border-top: 3vw solid #f5f5f5）
最易忽略的是打印样式——用户可能截图或直接打印这张卡片，记得加 @media print { box-shadow: none; }，不然切口和阴影全变成黑块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
