在做商场项目的时候，我们可能都体验过“优惠券”的需求。有一天，产品告诉我一个绝妙的主意：这张优惠券的宽度会随着内容的变化而变化！一下子陷入了人生的大思考，这样的图片方法不太工整，于是萌生了一个想法：这些效果可以用纯css实现吗？0.内切角首先我们看看css是如何实现innerchamfer.card{width:200px;高度：100px；位置：相对；背景图像：径向渐变（圆圈在左边50px，#fff，#fff10px，透明10px），径向渐变（圆圈在右边50px，#fff，#fff10px，透明11px），径向渐变（圆圈在100pxtop,#fff,#fff10px,transparent11px),radial-gradient(circleat100pxbottom,#fff,#fff10px,transparent11px);background-color:red;}效果图：其实首先想到的就是画一个圆。在这个例子中，主要是利用设置背景图片的属性和radial-gradient渐变来达到同样的效果。整体造型还是方形的。我相信你可以看到副作用。首先，添加的渐变需要和背景颜色同步。例如，倒角设置为白色，背景为灰色，然后揭露真相。在可能使用圆的情况下给倒角设置颜色的效果1.在虚线上实现内倒角，然后再考虑虚线。既然要纯css，那么虚线能否优雅实现呢？其实线性渐变是可以做的，我们来看看：.line{width:100%;高度：1px；背景图像：线性渐变（向右，#ccc0%，#ccc50%，透明50%）；背景大小：12px1px；background-repeat:repeat-x;}代码效果：/*稍微调整size属性，改变虚线的宽度*/background-size:20px1px;渐变，我们试试波浪框效果：.card{background:red;宽度：200px；高度：100px；位置：相对；}.card:after{内容：'';位置：绝对；顶部：0px；底部：0px；左：-5px；宽度：10px；高度：100%；背景：径向渐变（圆形，#ffffff，#ffffff4px，透明5px）；背景大小：10px10px;}3.优惠券剪卡片样式的效果就出来了，我们只需要将这些效果组合起来，调整一下颜色、位置、宽度等细节就可以了~纵向优惠券效果示例：.card1{width:120px;高度：150px；位置：相对；背景图像：径向渐变（圆圈在左边90px，#fff，#fff10px，透明10px），径向渐变（圆圈在right90px,#fff,#fff10px,透明11px);背景色：红色；border-radius:4px;}.card1>.line{position:absolute;底部：60px；左：14px；宽度：96px；高度：1px；背景图像：线性渐变（向右，#ffffff0%，#ffffff50%，透明50%）；背景大小：12px1px；background-repeat:repeat-x;}研究极组合，横向优惠券剪卡风格效果：.card2{width:200px;高度：100px；位置：相对；背景图像：径向渐变（圆形在130px顶部，#fff，#fff10px，透明11px），径向渐变（圆形在130px底部，#fff，#fff10px，透明11px）；背景色：红色；border-radius:4px;}.card2>.line{position:absolute;顶部：50px；右：31px；宽度：78px；高度：1px；背景图像：线性渐变（向右，#ffffff0%，#ffffff50%，透明50%）；背景大小：12px1px；背景重复：重复-x；变换：旋转（90度）；}.card2：之后{内容：'';位置：绝对；顶部：0px；底部：0px；右：-5px；宽度：10px；高度：100%；background:radial-gradient(circle,#ffffff,#ffffff4px,transparent5px);/*这个可以优化成半圆，右边也可以设置为0*/background:radial-gradient(circleatright,#ffffff,#ffffff4px,透明5px);background-size:10px14px;}有这样的味道吗？只能使用径向渐变和线性渐变来制作效果。想着UI小姐姐不用帮我剪了，她可以早点回去上班陪男朋友。我赶紧把结果给她看，没想到小姐姐跟我说你没有影子就不好看，让我又陷入了人生的大思考回到工位，我放弃了思考，用颤抖的手胡乱加了个影子，果然，露了出来！但我们必须冷静。之前的想法是先画一个正方形，然后放一个圆或者半圆叠加，所以最后还是会显露出原来的形状。半圆缺口最后一定要挖空，但是css显然做不到等等等等，这时候就需要把思路反过来了。不是先画正方形再去掉半圆，而是一开始不画半圆的空隙，填满整个不规则的形状，所以不需要去掉半圆。下面我们来看看这个css及其效果：width:300px;高度：100px；背景：径向渐变（右下圆圈，蓝色10px，红色0）右上/50%50px不重复，径向渐变（右上圆圈，蓝色10px，橙色0）右下/50%50pxno-repeat,radial-gradient(circleatlefttop,blue10px,yellow0)bottomleft/50%50pxno-repeat,radial-gradient(circleatleftbottom,blue10px,green0)topleft/50%50px无-重复;按照这个思路，把上面的例子变成一个有上下花瓣的正方形，填充透明径向渐变画出的圆圈外的区域，阴影部分用filter.card2处理{width:200px;高度：100px；位置：相对；background:radial-gradient(circleat130pxtop,transparent10px,red0)top/100%51pxno-repeat,radial-gradient(circleat130pxbottom,transparent10px,red0)bottom/100%51pxno-repeat;边界-半径：4px；滤镜：阴影（2px2px2pxrgba（0、0、0、.2））；/*盒子阴影：12px12px2px1pxrgba(0,0,255,.2);*/}.card2>.line{/*没有变化*/}最终效果如下，为了看清楚阴影故意加深了：不行，波框还是被半圆覆盖，所以阴影贴合效果无法设置，但是基本的卡券形式终于完美实现了。第二天UI小姐姐跟我说她改了设计图，让我看一下。我说停手，要不你帮我把图剪下来。以上就是文章的全部内容，希望对大家有所帮助！觉得文章写得好，可以点赞收藏。也欢迎您关注。我会持续更新更多有用的前端知识和实用技巧。一日茶无味，愿与你共同成长~
