关于前端:用纯CSS实现优惠券剪卡风格

2次阅读

共计 3764 个字符，预计需要花费 10 分钟才能阅读完成。

在做商城类我的项目的时候，咱们可能都会经验过“优惠券”这类需要，笔者在过往工作中，都是间接要求 UI 切图来实现，直到有一天产品通知我一个奇思妙想：这个优惠券的宽度会随内容变动的！一下子让我陷入了人生的大思考，这样图片形式可不好整呐，因而萌发一个想法：能不能用纯 css 实现这些成果呢？

首先咱们来看下 css 如何实现内倒角

.card {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: 
        radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px),
        radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 100px top, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 100px bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}

效果图：

其实最先想到的是画圆形，在这个例子当中，次要是利用了设置背景图的属性与 radial-gradient 突变来实现，实际效果差不多，在形态上呢还是放弃整体方形，置信大家也看进去副作用，首先这个增加的突变须要和背景色彩同步，比方设置的倒角是红色，背景是灰色的，那就露馅啦。

应用圆形的可能状况	为倒角设置色彩的成果

下面实现了内倒角，接下来就要思考虚线了，既然要纯 css，能不能把虚线也给优雅地实现了呢，其实线性突变就能够做到，一起来看看：

.line {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
}

代码成果：

/* 略微调整下 size 属性就能扭转虚线宽度 */
background-size: 20px 1px;

同样是利用径向突变，咱们尝试下波浪框成果：

.card {
    background: red;
    width: 200px;
    height: 100px;
    position: relative;
}
.card:after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
    background-size: 10px 10px;
}

通过以上例子，优惠券剪卡格调的成果曾经跃然纸上了，咱们只须要把这些成果组合起来，对色彩地位宽度等细节进行调整~

竖型优惠券例子成果：

.card1 {
    width: 120px;
    height: 150px;
    position: relative;
    background-image: 
        radial-gradient(circle at left 90px, #fff, #fff 10px, transparent 10px),
        radial-gradient(circle at right 90px, #fff, #fff 10px, transparent 11px);
    background-color: red;
    border-radius: 4px;
}

.card1 > .line {
    position: absolute;
    bottom: 60px;
    left: 14px;
    width: 96px;
    height: 1px;
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
}

究极组合，横型优惠券剪卡格调成果：

.card2 {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: 
        radial-gradient(circle at 130px top, #fff, #fff 10px, transparent 11px),
        radial-gradient(circle at 130px bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
    border-radius: 4px;
}

.card2 > .line {
    position: absolute;
    top: 50px;
    right: 31px;
    width: 78px;
    height: 1px;
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
    background-size: 12px 1px;
    background-repeat: repeat-x;
    transform:rotate(90deg);
}

.card2:after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
/* 这里能够优化一下，变为半圆，right 也能够设置为 0 了 */
    background: radial-gradient(circle at right, #ffffff, #ffffff 4px, transparent 5px);
    background-size: 10px 14px;
}

是不是有那么点滋味了呢，仅用径向突变和线性突变就能做进去成果，一想到 UI 小姐姐都不必切图给我，能够早早上班回去陪她男朋友了，我连忙向她展现了成绩，没想到小姐姐跟我说，你这没暗影不难看呀，这下子让我又一次陷入了人生的大思考。

回到工位上，我放弃了思考，颤动的手胡乱地加了一个 shadow，果然，露馅了啊！

然而咱们要沉着，之前的思路是先画一个方形，而后搁置圆形或半圆叠盖，所以最终还是会暴露无遗，后果还是必须掏空那段半圆缺口啊，可 css 显著是做不到的

等等，这时候就须要逆转想法，不是先画一个方形再剔除半圆，而是一开始就不画半圆这个缺口，将整个不规则形态填充进去，也就不须要剔除半圆了，先来看看上面这段 css 以及它的成果：

width: 300px;
  height: 100px;
  background: 
  radial-gradient(circle at right bottom, blue 10px, red 0) top right /50% 50px no-repeat,
  radial-gradient(circle at right top, blue 10px, orange 0) bottom right / 50% 50px no-repeat,
  radial-gradient(circle at left top, blue 10px, yellow 0) bottom left / 50% 50px no-repeat,
  radial-gradient(circle at left bottom, blue 10px, green 0) top left / 50% 50px no-repeat;

按这个思路将下面的例子转为画高低两瓣方形，给通明径向突变绘制的 circle 以外的区域填上色彩，而暗影局部就用 filter 来解决

.card2 {
    width: 200px;
    height: 100px;
    position: relative;
    background: 
        radial-gradient(circle at 130px top, transparent 10px, red 0) top / 100% 51px no-repeat,
        radial-gradient(circle at 130px bottom, transparent 10px, red 0) bottom / 100% 51px no-repeat;
    border-radius: 4px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
    /* box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); */
}
.card2 > .line {/* 没变动 */}

最终成果如下，为了看清暗影成心加深了：

没方法，波浪框还是笼罩下来的半圆，所以设置不上贴合的暗影成果，然而根本的券卡模式总算是完满实现了。

第二天 UI 小姐姐跟我说，她改了设计图，叫我看看，我说停停，要不你还是切图给我吧。