高級Css3屬性背景漸變。它是如何工作的？

我正在從here拿一個非常受歡迎的例子。我想了解這些模式是如何從漸變屬性生成的。我剛纔拿了下面幾個例子。需要了解如何在漸變屬性中傳遞事物，以便我可以生成自己的模式。高級Css3屬性背景漸變。它是如何工作的？

.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>

來源

2017-02-27 Sahil Dhir

如果你想了解每個模式是如何構建的，你應該通過它放大（4倍在下面的例子中）解構它，並通過不同的，更明顯的一個替換每種顏色。

下面，對於第二種模式，我用線條末尾的透明替換了背景顏色＃444（番茄不太清晰），並用藍色，紅色等隨機顏色替換了每個發生的#999。
編輯：並在每個逗號後添加一個新行。每行一個*漸變顯示其中有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>

來源

2017-02-27 10:53:35 FelipeAls

高級Css3屬性背景漸變。它是如何工作的？

回答

相關問題