CSS绘制卡券、优惠券样式

一般做商城类的项目,为了商品促销,都会有优惠券的需求,如果有UI组可以切图那能省不少功夫,如果没有,那么我们自己也可使用CSS画出这些仿淘宝、京东的优惠券样式。

radial-gradient()

使用radial-gradient径向渐变函数,可以实现一个圆形镂空的样子,在移动端,radial-gradient的兼容性也是相当完美。

CSS 语法

background: radial-gradient(shape size at position, start-color, ..., last-color);

单个圆形镂空效果如下:

css 复制代码
.base-one-circle {
    width: 100px;
    height: 100px;
    position: relative;
    background: radial-gradient(circle at 0px 50px, transparent 10px, #28A4F2 0) top
  }

圆形的位置也可修改,只需要改"circle at..."后面这个两个数值即可,上,右,下的数值分别是:50px,0、100px,50px、50px,100px。

如果想要一个阴影状,带有立体感,可加上这个代码

css 复制代码
filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3))

完整的卡券样式

利用background: radial-gradient的特性,我们可以组合成更复杂、完整的优惠券样式:

css 复制代码
base-coupons {
    width: 250px;
    height: 100px;
    position: relative;
    background: radial-gradient(circle at right top, transparent 10px,  #28A4F2 0) top left / 60px 51% no-repeat,
      radial-gradient(circle at right bottom, transparent 10px,  #28A4F2 0) bottom left /60px 51% no-repeat,
      radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /190px 51% no-repeat,
      radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /190px 51% no-repeat;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
  }

如果想要在卡券的拼接处加上虚线效果,我们可以利用伪类去实现:

css 复制代码
.base-coupons::before {
    content: '';
    height: 80px;
    border: 1px dashed #fff;
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    margin: auto;
  }

那么最终的优惠券样式效果:

linear-gradient()

CSS 语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient 函数是一个线性渐变函数,我们可以使用这个线性渐变加伪类来实现一个优惠券的锯齿状效果,如下:

css 复制代码
.base-coupons::after {
    content: '';
    position: absolute;
    height: 100%;
    width:5px;
    top: 0;
    right: -5px;
    background-image: linear-gradient(to bottom, #eeeeee 5px, transparent 5px, transparent),
    radial-gradient(10px circle at 5px 10px, transparent 5px, #eeeeee 5px);
    background-size: 5px 15px;
  }
相关推荐
艾小码11 分钟前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..1 小时前
ES6是什么
前端·javascript·es6
Jammingpro2 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI8 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_99 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front9 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie10 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀10 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻10 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js