css实用技巧之制作优惠券凹槽
css实用技巧之制作优惠券凹槽
日常开发中很多商城类项目都需要涉及优惠营销类,自然少不了优惠券的页面制作。而优惠券的设计经常会遇到凹槽,对于刚入门的前端来说没接触过就可能很难想象出如何能用纯CSS写出凹槽,很多人会使用图片作为背景,但使用图片有很大弊端,适用性不够广泛、不易扩展、图片较大占用网络等等。相反使用CSS实现容易扩展优惠券内容,几行代码又大大减小网络占用。今天咱就说说凹槽是如何实现的:
以下样式基于HTML:
<div class="coupon"></div>
1、纯色优惠券
.coupon{width:240px;height:100px;border-radius:10px;background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%);background-position: 66px -8px;background-size: 100% 100%;
}
2、线性渐变
.coupon{width:240px;height: 100px;background: linear-gradient(to right, #fd6868, #fd5252 60px) no-repeat left / 60px 100%,radial-gradient(circle at 8px 8px, transparent 8px, #fd5252 8px) repeat-y 60px -8px / 16px 100%, linear-gradient(to right, #fd5252 76px, #fe0000) no-repeat 76px 0 / 100% 100%;position:relative;border-radius:10px;
}
3、带阴影
正常我们使用阴影是box-shadow,但是box-shadow是根据盒子边缘进行投影,而使用背景透明用box-shadow是无法投影,需要使用filter:drop-shadow();
box-shadow:2px 3px 6px 0 black;
filter: drop-shadow(2px 4px 6px black);
4、对于没有阴影且背景纯色,可使用伪类实现
.coupon-container{--bg-color:#fff;background:var(--bg-color);
}
.coupon{width:240px;height:100px;border-radius:10px;position:relative;background: #fd6868;
}
.coupon::before, .coupon::after{content:'';display:block;width:12px;height:6px;position:absolute;left:60px;background:var(--bg-color);
}
.coupon::before{top:0;border-radius:0 0 6px 6px;
}
.coupon::after{bottom:0;border-radius:6px 6px 0 0;
}
css实用技巧之制作优惠券凹槽相关推荐
- CSS实用技巧第一讲:文字处理
前言 作为程序员的我们,书写代码也需要大量的技巧.一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满.因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新.容易理解.舒服自 ...
- css实用技巧:巧用css实现两栏等高布局
又到了利用碎片学习的时间了,看看这个小案例,超级实用的一个css技巧:css实现两栏等高布局. 样式方面: <style> #box{ width:900px; font-size:28p ...
- CSS 实用技巧(更新ing)
目录 前言 技巧 1.首字下沉 2.给文字添加渐变 3.使用SVG icons 4.使用图像作为光标 5.为列表标记设置样式 6.设计视频的字幕 7.用文字剪辑视频 8.平滑滚动 9.过滤图像 10. ...
- CSS3 实用技巧:制作三角形
您可能感兴趣的相关文章 2012年最酷的25个 CSS3 学习教程 35个让人惊讶的 CSS3 动画效果演示 推荐12个漂亮的 CSS3 按钮实现方案 20个非常绚丽的 CSS3 特性应用演示 24款 ...
- css删除li 圆点_六种设计难题的CSS实用技巧!
前言 最近在恶补css的知识,看到<css揭秘>一书,如获至宝.下面节选一部分笔记. 一.扩大按钮的点击范围 对于哪些较小的.难以瞄准的控件来说,如果不能把它的视觉尺寸直接放大,将其可点击 ...
- 实用技巧--CAD制作空心文字【中级】
实际工作中,cad的空心字一般有以下用途: 一.可以用于标题栏的作者署名(个人的艺术签名): 二.可以用于线切割行业,进行文字切割: 三.一些特别的字体--cad常规字体库没有的,需要描出来的. 怎样 ...
- 《众妙之门——网站UI设计之道(修订版)》一1.3 制作有效用户界面的实用技巧...
本节书摘来自异步社区<众妙之门--网站UI设计之道(修订版)>一书中的第1章,第1.3节,作者[德]Smashing Magazine,更多章节内容可以访问云栖社区"异步社区&q ...
- css 动态生成圆形区域内扇形个数_CSS实用技巧总结
❝ 作者:幻灵尔依 (授权原创) https://juejin.im/post/5e0fef935188253a624a6a72 ❞ <css揭秘>中讲了47个css技巧,其中有很多日常编 ...
- html如何在页面打开时让鼠标光标停留在某个表单文本框,网页制作实用技巧
网页制作实用技巧 1.让你的网页无法另存为 ◆ 2.让IFRAME框架内的文档的背景透明 ◆ 3.禁止右键: ◆ onselectstart ="return false" οns ...
- vue一二级联动清空二级数据_【周一实用技巧】二级联动还不够,自动更新才最牛。Excel 2013利用数据验证条件制作一级、二级联动和自动更新下拉列表...
Excel 2013实用技巧教程系列 第-9.4-节 下拉列表 下拉列表作为提高数据录入效率和防止错误数据的有效方法,在日常工作中应用非常普遍.除了一级.二级联动列表,小编excel小课堂(ID:e ...
最新文章
- 2021年大数据Flink(三十一):​​​​​​​Table与SQL案例准备 依赖和​​​​​​​程序结构
- 这头像是代表入职送理发福利吗?
- python主要就业方向-四种Python高薪就业方向
- matlab vco,MATLAB锁相环仿真程序求解
- 小程序能打开html页面,小程序新功能直接打开网页
- M2Det 论文阅读心得[目标检测领域]
- 一二线城市知名 IT 互联网公司名单,程序员选择多了
- Altium和 Cadence Allegro 画的PCB导入Slwave
- 海马扫描Linux,海马扫描公式识别软件
- 微信小游戏实战--cocos creator实现wordle游戏(七)
- provisional headers are shown问题排查
- SpringBoot海景房出租管理系统+代码讲解
- 现实迷途 第三十六章 互相摊牌
- has leaked window com.android.internal.policy.impl.PhoneWindow解决(Dialog.cancel、dismiss、hide区别)
- stm32 esp8266 ota升级-自建mqtt和文件服务器全量升级
- python处理excel表格中合并的行
- 如何注册@live.com的邮箱
- Html5小游戏 转微信小程序,白鹭H5游戏转微信小游戏问题集锦,你关心的都在这里...
- 【Visual C++】游戏开发笔记二十五 最简化的DirectX 11开发环境的配置
- 【C语言】你会用吗?
热门文章
- r语言和python爬虫谁厉害_从事数据科学Python和R语言学哪个好?
- MATLAB 数据拟合 (使用 polyfit 多项式曲线拟合、polyval)
- 小技巧!Win10系统怎样恢复使用Win7中的照片查看器?非常简单!
- SAS更新sid的方法,简单有效,sid最新可到2022年3月
- 【PhotoScan精品教程】PhotoScan简介、安装教程(附PhotoScan1.4.5安装包下载)
- HP 8440P 4G内存蓝屏--内存颗粒容量支持问题
- python开发企业微信应用,使用Python发送企业微信消息
- import torch报错画图问题Matplotlib created a temporary config/cache directory at /tmp/matplotl
- 无线系统笔记(1)--梯度、散度、旋度(麦克斯韦先导)
- 学用计算机 关机,电脑关机命令是什么?快速关机必备(你学会了吗)