CSSとモールのクーポンカードに必要な手順を書きます

このようなスタイルは心配するすべてのモール形式のカードの請求書の上に残っていますか？CSSなじみのない、キャンバスあまりにも難しい、どのように行うの？

CSSいくつかの手順でモールのクーポンカードを書きますか？

3段階の合計：

開いてURLを（ブラウザ入力qishaoxuan.github.io/css_tricks / ...）
私たちは、スタイルを見つける必要があります
コピー＆ペースト

与えられたテストの後、我々はCSSカードクーポンを分析する必要があります。

のは、準備の基本を見てみましょう

放射状の勾配

background: radial-gradient(shape size at position, start-color, ..., last-color);
复制代码

値	説明
形状	：ラウンドの種類を決定する楕円（デフォルト）は：楕円放射グラデーションを指定します。サークル：指定された円形状の放射グラデーション
サイズ	勾配の大きさを定義します。
ポジション	位置は、勾配を定義します

このように、我々は簡単中心とした円形の背景を書くことができます

  .center-circle {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 50px 50px, transparent 10px, #00adb5 0);
  }
复制代码

線形勾配

background: linear-gradient(direction, color-stop1, color-stop2, ...);
复制代码

値	説明
方向	勾配値の方向（角度）で指定された角度
カラーストップ1、カラーストップ2、...	これは、開始と終了色のグラデーションを指定します

私たちはすることができグラデーショングラデーションの背景を使用せずにプロパティを書き、単純なを書き、特定の漸進的なプロセスを知りません。

  .linear-gradient {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, #00adb5, #00adb5);
  }
复制代码

バックグラウンド

backgroundあなたは、次の複数の画像を設定することができますbackground: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];を使用する,分離をすることができます。

基本を構成する起動するには

シンプルを書きます

限り円の円中心の位置を左に一例に配置されるように

.left-circle{
  width: 100px;
  height: 100px;
  position: relative;
  background: radial-gradient(circle at 0 50px, transparent 10px, #00adb5 0) top left/100px 100% no-repeat;
}
复制代码

詳細はこちら

また、覚えておくことbackgroundがあるというrepeat属性は？私達はちょうど、スタイル、再利用を設定し、その部分は、repeat絵を見て、することができ、それは無勾配ということではありませんlinear-gradientし、radial-gradientそれを組み合わせ、その後、擬似クラスで、我々は書き出すことができます。

.hollow-circles {
  width: 300px;
  height: 100px;
  position: relative;
  background: #00adb5;
  margin-bottom: 10px;
}
.hollow-circles::after {
  content: '';
  position: absolute;
  height: 5px;
  width:100%;
  left: 0;
  bottom: -5px;
  background-image: linear-gradient(to right, #00adb5 5px, transparent 5px, transparent),
  radial-gradient(10px circle at 10px 5px, transparent 5px, #00adb5 5px);
  background-size: 15px 5px;
}
复制代码

複雑な

私たちは、4つのバックグラウンドジョブを描画する必要があり、非常にシンプルな、あなたはその後、円を描くが、色の両側が異なる場合を考慮に入れるということだけではありませんを参照してください、正方形の各角に位置する各円は、その後、組み合わせ一緒に私たちはすることができます。

.two-circles {
  width: 300px;
  height: 100px;
  background: radial-gradient(circle at right top, transparent 10px, #00adb5 0) top left / 60px 51% no-repeat,
    radial-gradient(circle at right bottom, transparent 10px, #00adb5 0) bottom left /60px 51% no-repeat,
    radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /240px 51% no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /240px 51% no-repeat;
}
复制代码

最後に書かれました

我々は新しいものではなく、競合を参照すると、分析しようとすると、彼が私達が得るとき私たちは、私たちの再編の既存の知識と適切な変換のために、それの変形を学ん直前だっ可能です時間は、おそらく唯一見つけるために、しかし、競合が大切にすることを拒否していたが、少しだけ進歩がなくなっている場合には、しかし、また事実です。

最後に、最後に、このURL歓迎スター〜、歓迎の問題〜。

ます。https：//juejin.im/post/5d07c2476fb9a07ed524a08dで再現