分类
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(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;
}
径向渐变
语法
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%);
}