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屬性能夠用來控制元素的背景。

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

爲了更好的駕馭背景圖片，CSS3添加了3個新的background相關屬性。

1. background-clip
2. background-origin
3. background-size
4. 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後的座標點，默認元素中心點。

邊緣輪廓的具體位置能夠爲以下關鍵字：

1. closest-side 漸變中心距離容器最近的邊做爲終止位置。
2. closest-corner 漸變中心距離容器最近的角做爲終止位置。
3. farthest-side 漸變中心距離容器最遠的邊做爲終止位置。
4. 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 個值：

1. repeat-x 至關於 repeat no-repeat
2. repeat-y 至關於 no-repeat repeat
3. repeat 至關於 repeat repeat
4. space 至關於 space space
5. round 至關於 round round
6. no-repeat 至關於 no-repeat no-repeat

space

圖像會盡量得重複, 可是不會裁剪. 第一個和最後一個圖像會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在圖像之間. background-position屬性會被忽視, 除非只有一個圖像能被無裁剪地顯示. 只在一種狀況下裁剪會發生, 那就是圖像太大了以致於沒有足夠的空間來完整顯示一個圖像。

round

隨着容許的空間在尺寸上的增加, 被重複的圖像將會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像. 當下一個圖像被添加後, 全部的當前的圖像會被壓縮來騰出空間. 例如, 一個圖像原始大小是260px, 重複三次以後, 可能會被伸展到300px, 直到另外一個圖像被加進來. 這樣他們就可能被壓縮到225px.

性能

通常咱們會用一個的背景小圖片不斷重複來達到一些效果，爲了請求優化通常會把小圖片截取到 1px * 1px 大小，可是這樣渲染次數太多，有時候會有明顯的卡頓，咱們能夠將尺寸截取大一點這樣圖片大小沒大多少，可是渲染性能卻有明顯提高。

background-blend-mode

定義該元素的背景圖片，以及背景色如何混合。

它就像 PS 中的混合模式。能夠作一些 正片疊底，濾色等效果。

它的語法爲，單值或者雙值（用,分開）。

它的值有：

1. normal
2. multiply
3. screen
4. overlay
5. darken
6. lighten
7. color-dodge
8. color-burn
9. hard-light
10. soft-light
11. difference
12. exclusion
13. hue
14. saturation
15. color
16. luminosity

background-attachment

若是指定了background-image ，那麼background-attachment決定背景是在視口中固定的仍是隨包含它的區塊滾動的。

它的值爲：

1. scroll 默認值，背景相對於元素自己固定， 而不是隨着它的內容滾動
2. local 背景相對於元素的內容固定。若是一個元素擁有滾動機制，背景將會隨着元素的內容滾動
3. fixed 背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

咱們通常只使用fixed這個值，讓背景圖片不隨着滾動而滾動。

background-position

爲每個背景圖片設置初始位置。屬性被指定爲一個或多個位置值，用逗號隔開。

默認位置是padding-box的左上角。

它的值能夠是left，top這些位置關鍵字，還能夠是長度值和百分比。

div {
    background-position: 50% 10px, center, left bottom;
    /* 分別設置三張背景圖片的位置 */
}
複製代碼

background-origin

指定背景圖片background-image屬性的原點位置的背景相對區域。當使用 background-attachment爲fixed時，該屬性將被忽略不起做用。

它的值能夠是：

1. padding-box 默認值 背景圖片的擺放以padding區域爲參考
2. border-box 背景圖片的擺放以border區域爲參考
3. content-box背景圖片的擺放以content區域爲參考

background-clip

設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。

它的值能夠是：

1. border-box 默認值 背景延伸至邊框外沿（可是在邊框下層）。
2. padding-box 背景延伸至內邊距外沿。不會繪製到邊框處。
3. content-box 背景被裁剪至內容區外沿。
4. text 背景被裁剪成文字的前景色。

background-size

設置背景圖片大小。圖片能夠保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。

對於多背景用,分隔。

它的值能夠是長度值和百分比還有下面的關鍵字

1. auto 以背景圖片的比例縮放背景圖片
2. cover 縮放背景圖片以徹底覆蓋背景區，可能背景圖片部分看不見。和contain值相反
3. 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的值能夠爲：

1. none
2. 連接資源，如url(resources.svg#c1)
3. 盒子值，一共有 7 個
   1. margin-box 使用 margin box 做爲引用框
   2. border-box 使用 border box 做爲引用框
   3. padding-box 使用 padding box 做爲引用框
   4. content-box 使用 content box 做爲引用框
   5. fill-box 利用對象邊界框做爲引用框
   6. stroke-box 使用筆觸邊界框做爲引用框
   7. view-box 使用最近的 SVG 視口做爲引用框
4. 形狀函數（至關於 SVG 中的形狀元素）
   1. inset()
   2. circle()
   3. polygon()
   4. path()
5. 盒子和形狀結合值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屬性讓它有動畫效果，不過須要變更先後的座標點數量必須相同。