CSS背景漸變

第一次接觸背景漸變的時候其實沒什麼感受，但自從看了《CSS揭祕》後發現背景漸變能夠有不少種玩法，能夠替代一部分圖片實現的內容，效果很是棒

線性漸變

css背景漸變基本語法格式：

background: linear-gradient( [ angle | to side-or-corner , ] ? color-stop [ , color-stop]+ )

第一個參數是表明漸變的角度方向，能夠是角度值或者方向順序

默認角度爲180deg，表明漸變方向是垂直向下的，90度是水平向右，對應的方向順序也可寫成to bottom、to right

.box {
  background: linear-gradient(#0f0, #00f); /* to bottom */
  background: linear-gradient(90deg, #0f0, #00f); /* to right */
}
複製代碼

第二個及以後的參數是顏色值與其起止位置

仍是上面的例子，只指定顏色值，至少要指定兩種顏色，默認將平均分配，每一個色值各佔比例相同。能夠使用數值或者百分比調整漸變的長度，推薦使用百分比更加靈活。

.box {
  background: linear-gradient(90deg, #0f0 50%, #00f 80%, #f00 100%);
}
複製代碼

在一個位置的分界點設置不一樣的色值，能夠作出條紋的效果

.box {
  background: linear-gradient(
    #0f0 25%, #00f 25%,
    #00f 50%, #f00 50%,
    #f00 75%, #ff0 75%);
}
複製代碼

徑向漸變

徑向漸變基本語法格式相似：

background: radial-gradient( [ bg-position || angle, ] ? [ shape || size, ] ? color-stop, color-stop [ , color-stop]* )

第一個參數是表明漸變的位置，能夠是方向的含義，也能夠是確切的數值，默認在中心位置

.box {
  background: radial-gradient(#0f0, #f00);
  background: -webkit-radial-gradient(#0f0, #f00);
}
複製代碼

設置漸變中心位置，使漸變中心在框的左上方

.box {
  background: radial-gradient(
    top left,
    #0f0, #f00); /* 等價於 background: radial-gradient(0 0, #0f0, #f00); */
  background: -webkit-radial-gradient(
    top left,
    #0f0, #f00);
}
複製代碼

第二個參數是漸變的形狀和大小，形狀能夠是圓形或者橢圓，大小有如下幾個值

• closest-side 近邊
• closest-corner 近角
• farthest-side 遠邊
• farthest-corner 遠角
• contain 背景圖像徹底覆蓋背景區域
• cover 背景圖像徹底適應內容區域

通常來講的大小排序爲，近邊<近角<遠邊<遠角，這是因爲圓心到邊的垂直距離要比點到角的距離更近，contain、cover和background-size中的contain、cover屬性相似

.box {
  background: radial-gradient(
    50px 50px,
    ellipse closest-side,
    #0f0, #f00); /* 近邊 */
  background: -webkit-radial-gradient(
    50px 50px,
    ellipse closest-side,
    #0f0, #f00);
}
複製代碼

.box {
  background: radial-gradient(
    50px 50px,
    ellipse farthest-corner,
    #0f0, #f00); /* 遠角 */
  background: -webkit-radial-gradient(
    50px 50px,
    ellipse farthest-corner,
    #0f0, #f00);
}
複製代碼

第三個及以後的參數是顏色值與其起止位置，與線性漸變一致

.box {
  background: radial-gradient(
    #0f0 15%, #f00 15%,
    #f00 30%, #ff0 30%,
    #ff0 45%, #0ff 45%,
    #0ff 60%, #00f 60%);
  background: -webkit-radial-gradient(
    #0f0 15%, #f00 15%,
    #f00 30%, #ff0 30%,
    #ff0 45%, #0ff 45%,
    #0ff 60%, #00f 60%);
}
複製代碼

一個簡單的靶圖

一些例子

結合background-size，背景漸變能夠玩出不少花樣，下面是一個桌布條紋背景圖

body {
  background:
    linear-gradient(90deg, rgba(0, 0, 255, .6) 50%, transparent 50%),
    linear-gradient(rgba(0, 0, 255, .6) 50%, transparent 50%), white;
  background-size: 50px 50px;
}
複製代碼

結合background-position，能夠移動漸變的位置，下面是一個銅板的平鋪背景

body {
  background:
    linear-gradient(45deg, #fff 15%, transparent 15%) 35px 65px,
    linear-gradient(45deg, transparent 85%, #fff 85%) -35px 35px,
    radial-gradient(transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 65%, #fff 65%),
    #ffb521;
  background-size: 100px 100px;
}
複製代碼

下面是一個星空背景圖

body {
  background:
    radial-gradient(white, rgba(255, 255, 255, .3) 2px, transparent 40px),
    radial-gradient(white, rgba(255, 255, 255, .2) 1px, transparent 30px),
    radial-gradient(white, rgba(255, 255, 255, .3) 2px, transparent 50px),
    radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .1) 2px, transparent 30px),
    black;
  background-size: 400px 400px, 230px 230px, 310px 310px, 150px 150px;
}
複製代碼