css3渐变

分类

1. 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
2. 径向渐变（Radial Gradients）- 由它们的中心定义

---

线性渐变

语法：

background: linear-gradient( [ | ,]? [, ]+ );

解读：

• angle–角度 用角度指定渐变的方向（角度）–逆时针
  • 0deg 从左到右
  • 90deg 从下到上
  • 180deg 从右到左
  • 270deg 从上到下
• side-or-corner [left | right] || [top | bottom]
• color-stop [|]?
  • color 指定颜色
  • length 指定起止色的位置，不允许负值
  • percentage 用百分比指定起止色位置

例子

• 默认从上到下渐变

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */

• 从左到右，指定方向（注意不同浏览器内核方向解析不同）

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */

• 对角（左上角到右下角）

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

• 多个颜色

background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 标准的语法 */

• 使用透明色 rgba(255,0,0,0)可替换为transparent

background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

• 使用角度

background: -webkit-linear-gradient(45deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(45deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(45deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(45deg, red, blue); /* 标准的语法 */

• 颜色占比50px-150px间，红色和黄色渐变

background: -webkit-linear-gradient(left, red 50px, yellow 150px);

• 重复

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 40%);

• 酷炫

.box1 {
	background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),
    linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),
    linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;
    background-size: 25px 25px;
}
.box2 {
	background:
		linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
		linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
		linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
	background-color:#e1ebbd;
	background-size: 128px 128px;
}
.box3 {
	background:
		linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
		linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
	background-color:#708090;
	background-size: 64px 128px;
}
.box4 {
	background-color:black;
	background-image:
		radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
		radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
		radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
		radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
.box5 {
	   background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 20px),
					     repeating-linear-gradient(-90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 20px);
       background-size: 10px 10px;
       background-position: 1px 1px;
       background-color: rgb(242,242, 242);
       box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 4px 0px;
}

• 高手http://lea.verou.me/css3patterns/#chocolate-weave

---

径向渐变

语法

background: radial-gradient(center, shape, size, start-color, …, last-color);

解读

• center 渐变起点的位置，可以为百分比，默认是图形的正中心
• shape 渐变的形状，ellipse（椭圆）或circle（圆形），默认为ellipse;如果元素为正方形，则ellipse和circle显示一样
• size 渐变的大小，即渐变到哪里停止，它有四个值：
  • closest-side：最近边
  • farthest-side：最远边
  • closest-corner：最近角
  • farthest-corner：最远角

例子

• 多颜色均匀分布

background: -webkit-radial-gradient(#71FF5E, #FFF175, #FF0000); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(#71FF5E, #FFF175, #FF0000); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(#71FF5E, #FFF175, #FF0000); /* Firefox 3.6 - 15 */
background: radial-gradient(#71FF5E, #FFF175, #FF0000); /* 标准的语法 */

• 颜色节点不均匀分布

background: -webkit-radial-gradient(#71FF5E 5%, #FFF175 15%, #FF0000 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(#71FF5E 5%, #FFF175 15%, #FF0000 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(#71FF5E 5%, #FFF175 15%, #FF0000 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(#71FF5E 5%, #FFF175 15%, #FF0000 60%); /* 标准的语法 */

• 设置形状

// circle
background: radial-gradient(circle, red, yellow, green)
// ellipse
background: radial-gradient(ellipse, red, yellow, green)

• 不同尺寸的渐变

background: radial-gradient(60% 55%, closest-side, blue, green, yellow, black) 
background: radial-gradient(60% 55%, farthest-side, blue, green, yellow, black)
background: radial-gradient(60% 55%, closest-corner, blue, green, yellow, black)
background: radial-gradient(60% 55%, farthest-corner, blue, green, yellow, black)

• 重复

background: repeating-radial-gradient(red, yellow 10%, green 20%)

• 设置方向

background: radial-gradient(bottom left, #fff 0%, #fff 60%, green 60%, green 100%)

• 重复半圆角内边框–左

background: #BCD0C5;
background-size: 15px 22px;
background-repeat: repeat-y;
background-image: -webkit-radial-gradient(left, circle, #fff 45%, transparent 45%); 

• 重复半圆角内边框–右

background: #BCD0C5;
background-size: 15px 22px;
background-repeat: repeat-y;
background-position: right;
background-image: -webkit-radial-gradient(right, circle, #fff 45%, transparent 45%);

• 实现内倒角

background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
       			radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
background-color: red;

• 上下花边

background: #BCD0C5;
position: relative;
::before {
    content: '';
    position: absolute;
    height: 10px;
    left: 0;
    right: 0;
    top: -10px;
    background: radial-gradient(20px 15px ellipse at bottom, #BCD0C5 10px, transparent 11px);
    background-size: 20px 10px;
}
::after {
    content: '';
    position: absolute;
    height: 10px;
    left:0 ; right: 0;
    bottom: -10px;
    background: radial-gradient(20px 15px ellipse at top, #BCD0C5 10px, transparent 11px);
    background-size: 20px 10px;
}

• 磁带

width: 200px;
height: 200px;
position: relative;
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%;
: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: '';
}

• 右上角

background: radial-gradient(100px at right top,transparent 50%,#BCD0C5 50%);

• 左右外角

background: #BCD0C5;
border: none;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
position: relative;
::before {
	content: '';
	position: absolute;
	bottom: 0px;
	left: -13px;
	height: 15px;
	width: 14px;
	background: radial-gradient(27px at left top, transparent 50%, #BCD0C5 50%);
}
::after {
	content: '';
	position: absolute;
	bottom: 0px;
	right: -13px;
	width: 14px;
	height: 15px;
	background: radial-gradient(27px at right top, transparent 50%, #BCD0C5 50%);
}

注：颜色渐变位置图解：具体请看https://www.zhangxinxu.com/wordpress/2013/09/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3css3-gradient%E6%96%9C%E5%90%91%E7%BA%BF%E6%80%A7%E6%B8%90%E5%8F%98/