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