文章目錄
- 漸變
- 重複漸變
- 徑向漸變
- 陰影
我們在寫樣式，設定背景效果的時候，是用到了background屬性。它是以下幾個屬性的簡寫：
- background-image，指定一個檔案或者是生成的顔色漸變作為背景圖檔；
- background-position，設定背景圖檔的初始位置；
- background-size，指定元素内的背景圖檔的渲染尺寸；
- background-repeat，設定需要填充整個元素，是否平鋪圖檔；
- background-origin，設定背景相對于元素的邊框、内邊距或者是内容盒子來定位；
- background-attachment，指定背景圖檔随着元素上下滾動；
- background-color，設定純顔色背景，這個顔色是渲染到背景圖檔的下方，一般情況在設定背景圖檔的同時還設定背景顔色，是為了避免背景圖檔未填充整個元素的時候，設定一個預設的背景顔色；
- background-clip，設定背景是否應該填充邊框、内邊距或者内容盒子
漸變
漸變是通過linear-gradient()函數來定義，一般情況下，是設定三個參數：角度、起始顔色、終止顔色。
當然，這并不是一直隻設定這三個參數，有時候，可能不需要設定角度值，有時候也可能不需要設定多個顔色值，具體情況根據具體的需求來定。
現在來示範一下漸變的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>* {
margin: 0;
}
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg,red,blue);
}</style>
</head>
<body>
<div></div>
</body>
</html> div沒有任何内容，那麼需要設定具體的尺寸，這樣設定背景，才能看到效果：
這個效果，角度是設定為45度，兩個顔色值。如果設定更多的顔色值：
角度值比較特殊的幾個值：
0deg代表垂直向上（相當于to
top），更大的值會沿着順時針變化，是以90deg代表向右漸變，180deg代表向下漸變，360deg又會代表向上漸變。
角度除了機關deg外，還有：
❑ rad——弧度（radian）。一個完整的圓是2π，大概是6.2832弧度。
❑ turn——代表環繞圓周的圈數。一圈相當于360度（360deg）。可以使用小數來表示不足一圈，比如0.25turn相當于90deg。
❑ grad——百分度（gradian）。一個完整的圓是400百分度（400grad）,100grad相當于90deg。
background-image: linear-gradient(90deg,pink 35%,red 34%,blue 81%);
還有很多的效果，我們可以一一去體驗一下。
重複漸變
當我們想要一個重複漸變的效果，但是又不想手動重複設定相同的顔色值的時候，可以通過
repeating-linear-gradient()
函數來設定。
條紋效果就是通過repeating-linear-gradient()函數來實作的：
div {
margin: 100px auto;
width: 450px;
height: 10px;
/* background-image: linear-gradient(90deg,pink 35%,red 34%,blue 81%); */
background: repeating-linear-gradient(45deg,#57b,#aaa 10px,#124 20px);
} 徑向漸變
徑向漸變是從一個點開始，向外擴充的漸變。和線性漸變一樣，可以設定多個顔色，使用百分比或者是長度機關指定位置；也可以設定徑向漸變為橢圓或者是圓形。
background: radial-gradient(red,blue); radial-gradient函數設定的徑向漸變預設是橢圓，設定圓形徑向漸變：radial-gradient(circle,white,midnightblue)
設定徑向漸變的位置：radial-gradient(3em at 25% 25%,white,midnightblue)
設定指定顔色節點位置的徑向漸變：radial-gradient(circle,white 0%,midnightblue 75%,red 100%)
重複的徑向漸變條紋效果：repeating-radial-gradient(circle,midnightblue 0,midnightblue 1em,white 1em,white 2em )