CSS3圖解顏色漸變

漸變產生的是圖像，所以需要使用 background

線性漸變

linear-gradient（方向，開始顏色，位置，顏色2，位置，顏色3，位置…）
方向：
to top：0deg
to right：90deg
to bottom：180deg-----默認值
to left：270deg

下面附上一張關於角度的圖（源於網絡）

下面給盒子添加寬高和 to right（向右）的漸變

background: linear-gradient(to right,red,blue);

下面是 to right bottom 即 45deg

background: linear-gradient(45deg，yellow 0%，red 50%，blue 50%，blue 100%);

徑向漸變

radial-gradient（形狀，大小，座標，顏色1，顏色2…）
形狀shape：默認值ellipse（橢圓形）
circle（圓形） ---->產生正方形的漸變色
ellipse（橢圓形） ---->適配當前的形狀，如果是正方形的容器，兩者效果一樣，如果寬高不一樣，默認效果切換到ellipse
大小size(漸變中心點：與最近（遠）邊有相切；與最近 （遠）角有相交)：默認是最遠角---->farthest-corner
closest-side ---->最近邊
farthest-side ---->最遠邊
closest-corner---->最近角
farthest-corner ---->最遠角
座標at position：默認在正中心，可以賦值座標（參照：元素的左上角）也可以賦值關鍵字（left center right top bottom）

給盒子添加寬300px，高200px，默認值形狀ellipse（橢圓形），漸變中心點默認位置在正中心

background: radial-gradient(red,blue);

circle（圓形漸變），漸變中心點默認位置在正中心

background: radial-gradient(circle,red,blue);

位置：left top（漸變中心點在左上角），默認形狀ellipse（橢圓）

background: radial-gradient(at left top,red,blue);

4個 ‘’大小size‘’ 的圖解，漸變中心點位置在以左上角爲參照的 x爲50px，y爲50px，漸變顏色爲紅–藍--黑，例：

background: radial-gradient(circle closest-side at 50px 50px,red,blue，black);

設置顏色的位置,默認形狀ellipse（橢圓形）

background: radial-gradient(red 0%,red 50%,blue 50%,blue 100%);

重複漸變

重複徑向漸變：
repeating-radial-gradient
利用設置上面一個設置顏色的方式進行重複

div {
	width: 300px;
    height: 300px;
    background: repeating-radial-gradient(circle closest-side at center center,
    #fff 0%,#fff 10%,
    #000 10%,#000 20%);
}

利用重複徑向漸變也可以做到一個類似於鉛球（是不是很好玩）

div {
    width: 300px;
    height: 300px;
    background: repeating-radial-gradient(circle closest-side at center center,
    #fff,#000);
}

唱片紋理(取自https://codepen.io/thebabydino/embed/HjJlL)

div {
    position: relative;
    width: 262px; height: 262px;
    border-radius: 50%;
    background: 
    linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, 
    linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, 
    repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
}
div::after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px; height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
    background: #b5ac9a;
    content: '';
}

重複線性漸變：
repeating-linear-gradient

div {
	width: 200px;
    height: 400px;
    background: repeating-linear-gradient(45deg,
    #fff 0%,#fff 10%,
    #000 10%,#000 20%);
}