顏色

CSS 中可以改變文字的顏色還有元素的背景顏色?？梢杂妙伾P(guān)鍵字來定義顏色，如 red ，但是這些顏色關(guān)鍵字并不常用。

我們提供的服務有：網(wǎng)站設(shè)計、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、岳陽縣ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術(shù)的岳陽縣網(wǎng)站制作公司

transparent

transparent 可以讓文字或背景變的完全透明的顏色，它就像 rgba(0,0,0,0) 的縮寫。

currentColor

currentColor 代表原始的 color 屬性的計算值。比如當前元素 color 為紅色，背景色設(shè)置為 currentColor ，那么現(xiàn)在背景色也為紅色。

rgb、rgba

顏色還可以用 rgb 函數(shù)表示，如 rgb(255, 255, 255) 代表白色，它每個參數(shù)的取值范圍是 到 255 ，它是用不同比例的紅、綠、藍來組成期望顏色。

rgba 函數(shù)代表紅-綠-藍-阿爾法，其中的 a 是透明度，取值范圍是 到 1 。

除了使用 rgb 函數(shù)，還可以使用 16 進制來表示，它的語法是 #RRGGBB ，如果 #f3f3f3 ，代表 f3 （16 進制）數(shù)量的紅-綠-藍。如果紅-綠-藍數(shù)值兩兩相等，如 #ffffff ，就可以簡寫成 3 位 16 進制的形式 #fff 。在高版本的瀏覽器還可以用 16 進制表示透明度 #RRGGBBAA ， AA 的取值范圍是 到 255 ，如果兩兩相等也可以簡寫成 #RGBA 形式。

hsl、hsla

hsl 函數(shù)是用色相-飽和度-明度（Hue-saturation-lightness）來表示顏色， HSL 相比 RGB  的優(yōu)點是更加直觀：你可以估算你想要的顏色，然后微調(diào)，比如要找到一個顏色的相近色，只需調(diào)整一下明度就行了。

色相（Hue）表示色環(huán)（即代表彩虹的一個圓環(huán)）的一個角度。這個角度作為一個無單位的 被給出，大致按照數(shù)值紅、橙、黃、綠、青、藍、紫變化節(jié)奏。取值范圍是 到 360

飽和度，取值 0% 到 100% ，100% 是滿飽和度，而 0% 是一種灰度。 明度，取值 0% 到 100% ，100% 明度是白色， 0% 明度是黑色，而 50% 明度是“一般的”。

hsla 和 rgba 相似其中的 a 設(shè)置透明度，取值范圍也是 到 1 。

系統(tǒng)顏色

系統(tǒng)顏色就是系統(tǒng)的顏色，不同的系統(tǒng)支持的顏色可能不同，一般很少使用。但是我們可以利用它實現(xiàn)系統(tǒng)主題風格類似的 Web 組件皮膚效果，來以假亂真。

背景

CSS2.1中有5個 background 屬性可以用來控制元素的背景。

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

為了更好的駕馭背景圖片，CSS3添加了3個新的 background 相關(guān)屬性。

1. background-clip
2. background-origin
3. background-size
4. background-blend-mode

CSS3 中還添加了多背景漸變等等新特性。

background-image

為元素設(shè)置一個或多個背景圖像。 background-image 在 background-color 之上、 border 之下渲染。也就是一個同時設(shè)置了 background-color 和 background-image 那么 background-image 會覆蓋 background-color 。

background-image 的值是一個圖片或多個圖片（用 , 分隔）。

div {
    background-image:  url("a.jpg"), url("b.jpg");
}

linear-gradient()

創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片。CSS 漸變沒有固定大小也沒有固定寬高比，它只等設(shè)置漸變角度、漸變顏色和漸變梯度。

linear-gradient 的語法是 [角度（角度或關(guān)鍵字）], 顏色 [梯度] ，它們用 , 分隔，角度可選默認時從上到下漸變。

顏色關(guān)鍵字是 to left ， to top ， to left top 等位置關(guān)鍵字。

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()

創(chuàng)建一個徑向漸變（由原點（漸變中心）輻射開的顏色漸變）的圖片。

radial-gradient() 的語法是 邊緣輪廓的具體位置 形狀 漸變中心 后面是 顏色 用 , 分隔。

div {
    background: radial-gradient(circle closest-side at 50px 30px, yellow, red 5%, orange, #fff, #000);
}

其中 邊緣輪廓的具體位置 形狀 漸變中心 都是可選。

形狀值可以為 circle 和 ellipse 默認 ellipse 。

漸變中心是 at 后的坐標點，默認元素中心點。

邊緣輪廓的具體位置可以為如下關(guān)鍵字：

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()

創(chuàng)建一個從原點輻射的重復漸變組成的圖片 。它類似于 radial-gradient 并且采用相同的參數(shù)，但是它會在所有方向上重復顏色，以覆蓋其整個容器。

div{
  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
}

conic-gradient()

創(chuàng)建一個錐形漸變的圖片。 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 屬性會被忽視, 除非只有一個圖像能被無裁剪地顯示. 只在一種情況下裁剪會發(fā)生, 那就是圖像太大了以至于沒有足夠的空間來完整顯示一個圖像。

round

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

性能

一般我們會用一個的背景小圖片不斷重復來達到一些效果，為了請求優(yōu)化一般會把小圖片截取到 1px * 1px 大小，但是這樣渲染次數(shù)太多，有時候會有明顯的卡頓，我們可以將尺寸截取大一點這樣圖片大小沒大多少，但是渲染性能卻有明顯提升。

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 決定背景是在視口中固定的還是隨包含它的區(qū)塊滾動的。

它的值為：

1. scroll  默認值，背景相對于元素本身固定， 而不是隨著它的內(nèi)容滾動
2. local  背景相對于元素的內(nèi)容固定。如果一個元素擁有滾動機制，背景將會隨著元素的內(nèi)容滾動
3. fixed  背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。

我們一般只使用 fixed 這個值，讓背景圖片不隨著滾動而滾動。

background-position

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

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

它的值可以是 left ， top 這些位置關(guān)鍵字，還可以是長度值和百分比。

div {
    background-position: 50% 10px, center, left bottom;
    /* 分別設(shè)置三張背景圖片的位置 */
}

background-origin

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

它的值可以是：

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

background-clip

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

它的值可以是：

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

background-size

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

對于多背景用 , 分隔。

它的值可以是長度值和百分比還有下面的關(guān)鍵字

1. auto  以背景圖片的比例縮放背景圖片
2. cover  縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見。和 contain 值相反
3. contain  縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白

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 用來剪切元素，代替了現(xiàn)在已經(jīng)棄用的剪切 clip 屬性。它創(chuàng)建一個剪切區(qū)域，區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。

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. 形狀函數(shù)（相當于 SVG 中的形狀元素）
   1. inset()
   2. circle()
   3. polygon()
   4. path()
5. 盒子和形狀結(jié)合值 clip-path: padding-box circle(50px at 0 100px);

clip-path 用的最多的值就屬 polygon 函數(shù)，它的參數(shù)由一堆 x y 坐標點組成。

如 clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 。是一個三角形。它可以接受無限個參數(shù)，每個參數(shù)都是 x y 坐標，最終顯示的形狀就是這些坐標連接成的形狀。

clip-path 也可以使用 transition 屬性讓它有動畫效果，不過需要變動前后的坐標點數(shù)量必須相同。

這里推薦一下我的前端學習交流扣qun：731771211 ，里面都是學習前端的，如果你想制作酷炫的網(wǎng)頁，想學習編程。自己整理了一份2019最全面前端學習資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計模式】到移動端HTML5的項目實戰(zhàn)的學習資料都有整理，送給每一位前端小伙伴，每天分享技術(shù)