米色纸感背景上放着一张活动门票：左边是主票，印着场次名、日期、时间与入场人数；右边是窄窄的票根，带烫金圆章、竖排条码和竖写的「贵宾通道」。鼠标移上去，票根会从主票旁边平滑撕开一段距离，中间那条虚线孔位同时淡出，整张票轻轻浮起。全程纯 CSS，没有 JavaScript，也没有用图片——纸面噪点、条码、烫金圆章都是 CSS 画的。

这张门票的三个做法

撕开动作只改了一个 gap。主票和票根是一个 flex 容器的两个子项，悬停时把 gap 从 0 变成 24px，配上一条回弹曲线，看起来就像被撕下来一样。
四个角形状各不相同。主票右侧两角是内凹的弧，票根左侧两角外凸，合起来正好咬合；靠 corner-shape 属性按角分别指定，不用切图也不用 mask。
条码和圆章都是渐变。条码是一条宽窄交替的重复线性渐变，烫金圆章是一个循环平移的多段灰阶渐变，所以换尺寸不会糊。

corner-shape 是怎么把圆角掰成别的形状的

CSS 的 border-radius 一直只能画椭圆角。corner-shape 是配套的新属性，它不改圆角大小，只改这个角按什么曲线过渡——可以是超椭圆、可以是内凹的勺形，也可以是切角。源码里给两个元素各写了一组值，按上右下左的顺序逐角指定：

corner-shape: squircle scoop scoop squircle;

主票用 squircle 配 scoop，票根反过来，两边的凹凸正好互补，所以合在一起时接缝是齐的，撕开后各自的轮廓也成立。整段写在 @supports 里，旧浏览器拿到的是普通圆角，版式不会散。

能改的地方

配色集中在 :root 的四个变量里（背景、纸色、墨色、点缀红），换成深色系就是夜场票。撕开的距离、回弹力度在 .ticket-container 的 gap 与过渡曲线上；票面尺寸在 .ticket-main 与 .ticket-stub 的宽高，改完记得同步孔位高度。文案都是普通 HTML 文本，直接替换即可。

常见问题

打开后角是普通圆角，没有凹口？

corner-shape 需要 Chrome 139 及以上版本，Safari 与 Firefox 目前尚未支持。源码已用 @supports 做了判断，不支持的浏览器会退回标准圆角，布局和悬停动效照常工作。

能改成竖版或者手机端的票吗？

可以。把容器的 flex-direction 改成 column，撕开方向随之变成上下，孔位那条虚线渐变的方向也要跟着从纵向改为横向。

条码能换成真的可扫描的吗？

当前的条码是装饰用的渐变纹理，不是真实编码。需要可扫描的话，把 .barcode 换成后端生成的条码图或前端条码库输出的 SVG 即可，外框样式不用动。

适合用在哪

演出、展会、影院的购票页与电子票据，活动邀请函，以及会员卡、优惠券一类需要「票感」的卡片模块。完整的角形状写法与变量都在样式文件里，下载后可查看。