高级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属性背景渐变。它是如何工作的？

回答

相关问题