CSS 中使用径向渐变实现卡券效果

前几天，同事接到一个积分商城项目，其中有一个卡券兑换礼品功能。我想了一会没什么好的思路，就忙自己的项目去了。但想到以后自己可能也会遇到类似的需求，所以周末学习整理了下几种卡券效果的实现。 常见的卡券样式如下：   使用伪元素实现（Less 版本） ticket.less .ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) { position: relative; box-sizing: border-box; padding: 0 @r; width: @width; height