在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
今天是618 ,各大商城都在搞促销活动,今天我们就来用css做一个商城卡卷,具体如下:
还在为上面这样格式各样的商城卡券的样式而发愁?CSS 不熟,canvas 太难,怎么办? 用 CSS 写一个商城卡券需要几步? 一共需要三步:
交给测试后,我们来分析下 CSS 卡券。 我们来准备一下基础知识 radial-gradien: background: radial-gradient(shape size at position, start-color, ..., last-color);
这样,我们能很容易写出一个居中的圆形背景图 .center-circle { width: 100px; height: 100px; background: radial-gradient(circle at 50px 50px, transparent 10px, #00adb5 0); } linear-gradient background: linear-gradient(direction, color-stop1, color-stop2, ...);
我们不需要知道具体的渐变过程,只要写一个简单的,写一个使用渐变属性而不渐变背景图即可: .linear-gradient { width: 100px; height: 100px; background: linear-gradient(to right, #00adb5, #00adb5); } background
开始组合基础知识 写一个最简单的 只要把上述中心圆示例的圆形位置定位在左侧即可 .left-circle{ width: 100px; height: 100px; position: relative; background: radial-gradient(circle at 0 50px, transparent 10px, #00adb5 0) top left/100px 100% no-repeat; } 进一步学习 你可还记得 .hollow-circles { width: 300px; height: 100px; position: relative; background: #00adb5; margin-bottom: 10px; } .hollow-circles::after { content: ''; position: absolute; height: 5px; width:100%; left: 0; bottom: -5px; background-image: linear-gradient(to right, #00adb5 5px, transparent 5px, transparent), radial-gradient(10px circle at 10px 5px, transparent 5px, #00adb5 5px); background-size: 15px 5px; } 复杂一点 看见很简单,不就是刚才那个圆再画一个吗,但是要考虑到两侧的颜色是不同的,所以我们需要画四个背景图才行,将每个圆定位在方形的各个角落,然后组合在一起即可。 .two-circles { width: 300px; height: 100px; background: radial-gradient(circle at right top, transparent 10px, #00adb5 0) top left / 60px 51% no-repeat, radial-gradient(circle at right bottom, transparent 10px, #00adb5 0) bottom left /60px 51% no-repeat, radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /240px 51% no-repeat, radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /240px 51% no-repeat; } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论