一次设计师画了一个设计图，是一个卡券信息，左右各有两个圆。

起初觉得很难实现，网上也很少有类似的答案。

后来看了些 background 卡券的实例，顺便探究了一下 background 的MDN 文章，学到了其更多的属性和使用方法。
MDN-background

首先，要学会分辨的误区就是：background不止可以使用一个 background-image.

介绍实现的原理

知识准备：

  • 1.根据MDN的解释，background能够被设置1个或者多个background-image属性

    1. background: center / contain no-repeat url("../../media/examples/firefox-logo.svg"),
    2.           10% 10% / 20% no-repeat url("../../media/examples/lizard.png");

  • 2.background-image可以使用以下3种值

    • url() - 最常用的就是这个，但是还有下面那个值，容易被我们忽略

    • gradient - 渐变，其中又分为线性渐变、径向渐变、重复线性渐变、重复径向渐变。我们这次的主角是：radial-gradient

      通过 circle at 属性，我们可以决定径向渐变的圆心，从而实现我们这次的功能

    • elemnet() - 没什么研究，不管它了

  • 3.优化，去除锯齿，渐变需要留下1px来消除锯齿，参考: https://www.imooc.com/qadetail/138930?t=176061

原理实现：
1、将背景分成4份。
2、使用径向渐变，圆心分别为两个小半圆分成的4个四分之一圆的圆心。
3、内置渐变颜色使用两个半圆的颜色。
大致完成。

代码一（存在小瑕疵）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.   <div class="wrap"></div>
  10. </body>
  11. <style>
  13. .wrap {
  14.   margin: 0 auto;
  15.   width: 300px;
  16.   height: 200px;
  17.   border-radius: 4px;
  18.   background: radial-gradient(circle at 0px 100%, #fff 10px, #0898ea 10px) top left / 50% 50% no-repeat,
  19.     radial-gradient(circle at 100% 100%, #fff 10px, #0898ea 10px) top right / 50% 50% no-repeat,
  20.     radial-gradient(circle at 0 0, #fff 10px, #0898ea 10px) bottom left / 50% 50% no-repeat,
  21.     radial-gradient(circle at 100% 0%, #fff 10px, #0898ea 10px) bottom right / 50% 50% no-repeat;
  22. }
  23. </style>
  24. </html>

效果如下
通过background实现左右半圆的卡券效果 - 图1
通过观察，我们发现代码一，存在两个问题

  • 1、中间存在四条白线（原因未知）

    解决方案，将分成的四分之一块，x轴，多分1%；然后横轴的白线，通过伪元素补全。

  • 2、两个半圆有锯齿

    这个是因为渐变需要1px的缓冲区，我们给它增加 1px 的缓冲区。 radial-gradient(circle at 0px 100%, #fff 10px, #0898ea 10px) top left / 50% 50% no-repeat 改成 radial-gradient(circle at 0px 100%, #fff 10px, #0898ea 11px) top left / 50% 50% no-repeat

于是有了下面的代码二。

代码二（完美版）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.   <div class="wrap"></div>
  10. </body>
  11. <style>
  13. .wrap {
  14.   position: relative;
  15.   margin: 0 auto;
  16.   width: 300px;
  17.   height: 300px;
  18.   border-radius: 4px;
  19.   background: radial-gradient(circle at 0px 100%, #fff 10px, #0898ea 11px) top left / 51% 50% no-repeat,
  20.     radial-gradient(circle at 100% 100%, #fff 10px, #0898ea 11px) top right / 51% 50% no-repeat,
  21.     radial-gradient(circle at 0 0, #fff 10px, #0898ea 11px) bottom left / 51% 50% no-repeat,
  22.     radial-gradient(circle at 100% 0%, #fff 10px, #0898ea 11px) bottom right / 51% 50% no-repeat;
  23. }
  24. .wrap::after {
  25.   content: '';
  26.   position: absolute;
  27.   left: 11px;
  28.   top: calc(50% - 1px);
  29.   bottom: calc(50% + 1px);
  30.   right: 11px;
  31.   height: 2px;
  32.   background: #0898ea;
  33. }
  34. </style>
  35. </html>

最终效果如下：
通过background实现左右半圆的卡券效果 - 图2

complete.