アドバンスCss3プロパティの背景グラデーション。どのように機能するのですか？

Question

私はhereから非常に普及した例を取っています。これらのパターンがグラデーションのプロパティからどのように生成されているかを理解したい。私はちょうど以下のいくつかの例を取っ​​てコンパイルしました。自分のパターンを生成できるように、グラデーションプロパティで物を渡す方法を理解する必要があります。

.pattern { 
 
    height: 100px 
 
} 
 

 
.pattern1 { 
 
    background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3; 
 
    background-size: 20px 20px; 
 
} 
 

 
.pattern2 { 
 
    background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), #444; 
 
    background-size: 16px 48px; 
 
} 
 

 
.pattern3 { 
 
    background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%), radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%) 50px 50px; 
 
    background-color: #b03; 
 
    background-size: 100px 100px; 
 
} 
 

 
.pattern4 { 
 
    background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%); 
 
    background-size: 100px 100px; 
 
    background-color: #EC173A; 
 
}

<div class="pattern1 pattern"></div> 
 
<div class="pattern2 pattern"></div> 
 
<div class="pattern3 pattern"></div> 
 
<div class="pattern4 pattern"></div>

Answer 1

あなたは、各パターンが構築されているかを理解したい場合は、それより大きな（例は次の4倍）することによって、それを分解し、はっきりと目に見える1で各色を交換する必要があります。

以下、2番目のパターンでは、ラインの終わりにバックグラウンドカラー＃444を置き換えました（トマトは明瞭ではありません）。#999の各出現を青、赤などのランダムな色に置き換えました。
EDIT：各カンマの後に改行を追加しました。 1行につき1つの* -gradientは、そのうち3つと背景色があることを示しています。

.pattern { 
 
    height: 192px; 
 
} 
 

 
.pattern2 { 
 
    background: linear-gradient(63deg, red 23%, transparent 23%) 7px 0, 
 
       linear-gradient(63deg, transparent 74%, blue 78%), 
 
       linear-gradient(63deg, transparent 34%, darkgreen 38%, #999 58%, transparent 62%), 
 
       transparent; 
 
    background-size: 64px 192px; 
 
}

<div class="pattern2 pattern"></div>