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 实用技巧（更新ing）
目录前言技巧 1.首字下沉 2.给文字添加渐变 3.使用SVG icons 4.使用图像作为光标 5.为列表标记设置样式 6.设计视频的字幕 7.用文字剪辑视频 8.平滑滚动 9.过滤图像 10. ...
css实用技巧：巧用css实现两栏等高布局
又到了利用碎片学习的时间了,看看这个小案例,超级实用的一个css技巧:css实现两栏等高布局. 样式方面: <style> #box{ width:900px; font-size:28p ...
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 ...