CSS 中的顏色、背景和剪下
CSS 中可以改變文字的顏色還有元素的背景顏色。可以用顏色關鍵字來定義顏色，如 red ，但是這些顏色關鍵字並不常用。
transparent
transparent 可以讓文字或背景變的完全透明的顏色，它就像 rgba(0,0,0,0) 的縮寫。
currentColor
currentColor 代表原始的 color 屬性的計算值。比如當前元素 color 為紅色，背景色設定為 currentColor ，那麼現在背景色也為紅色。
rgb、rgba
顏色還可以用 rgb 函式表示，如 rgb(255, 255, 255) 代表白色，它每個引數的取值範圍是 0 到 255 ，它是用不同比例的紅、綠、藍來組成期望顏色。
rgba 函式代表紅-綠-藍-阿爾法，其中的 a 是透明度，取值範圍是 0 到 1 。
除了使用 rgb 函式，還可以使用 16 進位制來表示，它的語法是 #RRGGBB ，如果 #f3f3f3 ，代表 f3 （16 進位制）數量的紅-綠-藍。如果紅-綠-藍數值兩兩相等，如 #ffffff ，就可以簡寫成 3 位 16 進位制的形式 #fff 。在高版本的瀏覽器還可以用 16 進製表示透明度 #RRGGBBAA ， AA 的取值範圍是 0 到 255 ，如果兩兩相等也可以簡寫成 #RGBA 形式。
hsl、hsla
hsl 函式是用色相-飽和度-明度（Hue-saturation-lightness）來表示顏色， HSL 相比 RGB 的優點是更加直觀：你可以估算你想要的顏色，然後微調，比如要找到一個顏色的相近色，只需調整一下明度就行了。
色相（Hue）表示色環（即代表彩虹的一個圓環）的一個角度。這個角度作為一個無單位的 被給出，大致按照數值紅、橙、黃、綠、青、藍、紫變化節奏。取值範圍是 0 到 360
飽和度，取值 0% 到 100% ，100% 是滿飽和度，而 0% 是一種灰度。 明度，取值 0% 到 100% ，100% 明度是白色， 0% 明度是黑色，而 50% 明度是“一般的”。
hsla 和 rgba 相似其中的 a 設定透明度，取值範圍也是 0 到 1 。
系統顏色
系統顏色就是系統的顏色，不同的系統支援的顏色可能不同，一般很少使用。但是我們可以利用它實現系統主題風格類似的 Web 元件面板效果，來以假亂真。
背景
CSS2.1中有5個 background 屬性可以用來控制元素的背景。
background-color background-image background-repeat background-attachment background-position
為了更好的駕馭背景圖片，CSS3添加了3個新的 background 相關屬性。
background-clip background-origin background-size background-blend-mode
CSS3 中還添加了多背景漸變等等新特性。
background-image
為元素設定一個或多個背景影象。 background-image 在 background-color 之上、 border 之下渲染。也就是一個同時設定了 background-color 和 background-image 那麼 background-image 會覆蓋 background-color 。
background-image 的值是一個圖片或多個圖片（用 , 分隔）。
div {
background-image:url("a.jpg"), url("b.jpg");
}
複製程式碼
linear-gradient()
建立一個表示兩種或多種顏色線性漸變的圖片。CSS 漸變沒有固定大小也沒有固定寬高比，它只等設定漸變角度、漸變顏色和漸變梯度。
linear-gradient 的語法是 [角度（角度或關鍵字）], 顏色 [梯度] ，它們用 , 分隔，角度可選預設時從上到下漸變。
顏色關鍵字是 to left ， to top ， to left top 等位置關鍵字。
div {
background-image:
linear-gradient(90deg, rgba(255, 255, 255, .5), orange 70%, #000),
linear-gradient(red, orange 70%, #000);
}
複製程式碼
repeating-linear-gradient()
一個由重複線性漸變組成的圖片。它的語法和 linear-gradient 類似。
div {
background-image: repeating-linear-gradient(-45deg,
transparent,
transparent 25px,
#000 25px,
#000 50px);
}
複製程式碼
radial-gradient()
建立一個徑向漸變（由原點（漸變中心）輻射開的顏色漸變）的圖片。
radial-gradient() 的語法是 邊緣輪廓的具體位置 形狀 漸變中心 後面是 顏色 用 , 分隔。
div {
background: radial-gradient(circle closest-side at 50px 30px, yellow, red 5%, orange, #fff, #000);
}
複製程式碼
其中 邊緣輪廓的具體位置 形狀 漸變中心 都是可選。
形狀值可以為 circle 和 ellipse 預設 ellipse 。
漸變中心是 at 後的座標點，預設元素中心點。
邊緣輪廓的具體位置可以為如下關鍵字：
closest-side closest-corner farthest-side farthest-corner
預設是 farthest-corner 。
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-radial-gradient()
建立一個從原點輻射的重複漸變組成的圖片 。它類似於 radial-gradient 並且採用相同的引數，但是它會在所有方向上重複顏色，以覆蓋其整個容器。
div{
background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
}
複製程式碼
想要更多的漸變效果可以參考這個網站。
conic-gradient()
建立一個錐形漸變的圖片。 conic 漸變類似於 radial 漸變，但是它的顏色位於圓的周圍。
它的語法是： [from 角度]? [at 位置]?, 顏色 角度...
div{
background: conic-gradient(from 0deg at 50px 100px, orange 0.2turn, #fff 0.09turn 0.3turn, orange 0.27turn 0.54turn);
border-radius: 50%;
}
複製程式碼
background-repeat
定義背景影象的重複方式。背景影象可以沿著水平軸，垂直軸，兩個軸重複，或者根本不重複。
它有 6 個值：
-
repeat-x相當於repeat no-repeat -
repeat-y相當於no-repeat repeat -
repeat相當於repeat repeat -
space相當於space space -
round相當於round round -
no-repeat相當於no-repeat no-repeat
space
影象會盡可能得重複, 但是不會裁剪. 第一個和最後一個影象會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在影象之間. background-position 屬性會被忽視, 除非只有一個影象能被無裁剪地顯示. 只在一種情況下裁剪會發生, 那就是影象太大了以至於沒有足夠的空間來完整顯示一個影象。
round
隨著允許的空間在尺寸上的增長, 被重複的影象將會伸展(沒有空隙), 直到有足夠的空間來新增一個影象. 當下一個影象被新增後, 所有的當前的影象會被壓縮來騰出空間. 例如, 一個影象原始大小是260px, 重複三次之後, 可能會被伸展到300px, 直到另一個影象被加進來. 這樣他們就可能被壓縮到225px.
效能
一般我們會用一個的背景小圖片不斷重複來達到一些效果，為了請求優化一般會把小圖片擷取到 1px * 1px 大小，但是這樣渲染次數太多，有時候會有明顯的卡頓，我們可以將尺寸擷取大一點這樣圖片大小沒大多少，但是渲染效能卻有明顯提升。
background-blend-mode
定義該元素的背景圖片，以及背景色如何混合。
它就像 PS 中的混合模式。可以做一些 正片疊底，濾色等效果。
它的語法為，單值或者雙值（用 , 分開）。
它的值有：
normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity
background-attachment
如果指定了 background-image ，那麼 background-attachment 決定背景是在視口中固定的還是隨包含它的區塊滾動的。
它的值為：
scroll local fixed
我們一般只使用 fixed 這個值，讓背景圖片不隨著滾動而滾動。
background-position
為每一個背景圖片設定初始位置。屬性被指定為一個或多個位置值，用逗號隔開。
預設位置是 padding-box 的左上角。
它的值可以是 left ， top 這些位置關鍵字，還可以是長度值和百分比。
div {
background-position: 50% 10px, center, left bottom;
/* 分別設定三張背景圖片的位置 */
}
複製程式碼
background-origin
指定背景圖片 background-image 屬性的原點位置的背景相對區域。當使用 background-attachment 為 fixed 時，該屬性將被忽略不起作用。
它的值可以是：
padding-box border-box content-box
background-clip
設定元素的背景（背景圖片或顏色）是否延伸到邊框下面。
它的值可以是：
border-box padding-box content-box text
background-size
設定背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。
對於多背景用 , 分隔。
它的值可以是長度值和百分比還有下面的關鍵字
-
auto以背景圖片的比例縮放背景圖片 -
cover縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見。和contain值相反 -
contain縮放背景圖片以完全裝入背景區，可能背景區部分空白
background
一種簡寫屬性，用於一次性集中定義各種背景屬性。它可以簡寫的屬性有 background-clip 、 background-color 、 background-image 、 background-origin 、 background-position 、 background-repeat 、 background-size ，和 background-attachment 。
簡寫的方式有：
color image repeat box color repeat position[ / size]? image image position[ / size]? repeat attachment clip origin color image position[ / size]? repeat attachment clip origin
clip-path
clip-path 用來剪下元素，代替了現在已經棄用的剪下 clip 屬性。它建立一個剪下區域，區域內的部分顯示，區域外的隱藏。
clip-path 的值可以為：
-
none - 連結資源，如
url(resources.svg#c1) - 盒子值，一共有 7 個
margin-box border-box padding-box content-box fill-box stroke-box view-box
- 形狀函式（相當於 SVG 中的形狀元素）
inset() circle() polygon() path()
- 盒子和形狀結合值
clip-path: padding-box circle(50px at 0 100px);
clip-path 用的最多的值就屬 polygon 函式，它的引數由一堆 x y 座標點組成。
如 clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 。是一個三角形。它可以接受無限個引數，每個引數都是 x y 座標，最終顯示的形狀就是這些座標連線成的形狀。這裡有一個網站可以幫助建立形狀。
clip-path 也可以使用 transition 屬性讓它有動畫效果，不過需要變動前後的座標點數量必須相同。