CSS3 渐变生成器
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
ps:
手册 -> 取值与单位 Values and Unis -> 图像(Image)
一、线性渐变
linear-gradient()
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(red, yellow);
}
</style>
<div></div>默认方向从上倒下，红到黄的渐变
1、第一个值，设置渐变方向
to right 朝右
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(to right, red, yellow);
}
</style>
<div></div>左 -> 右
to top 朝上
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(to right, red, yellow);
}
</style>
<div></div>从下向上，红在下黄在上
两个值设置方向
to top right 朝右上
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(to top right, red, yellow);
}
</style>
<div></div>朝右上角渐变
to right bottom 朝向右下角
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(to right bottom, red, yellow);
}
</style>
<div></div>从左上角开始渐变
预设值任意组合，不超过三个关键字就可以
设置渐变的角度
0deg
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(0deg, red, yellow);
}
</style>
<div></div>0度是从下往上
90deg 角度是顺时针
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(90deg, red, yellow);
}
</style>
<div></div>09度是从左向右，相当于to right
180deg
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(180deg, red, yellow);
}
</style>
<div></div>180度相当于to bottom
2、颜色的起止值
linear-gradient( 90deg, red 20px, yellow ) 20像素是红色的终止位置
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(90deg, red 20px, yellow);
}
</style>
<div></div>0到20像素是红色，20像素往后开始掺黄色过渡
linear-gradient( 90deg, red 20px, yellow 60px )
从20像素到60像素是颜色的过渡部分
20像素以前是红色
60像素往后是黄色
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(90deg, red 20px, yellow 60px);
}
</style>
<div></div>linear-gradient( 90deg, red 20px, yellow 60px, green 80px )
60像素的位置是纯粹的黄色
60到80是黄向绿的过渡，80往后都是绿
20以内是红色
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(90deg, red 20px, yellow 60px, green 80px);
}
</style>
<div></div>linear-gradient( 90deg, red 20px, yellow 60px, green 80px, #ff8080 130px )
80到130是green向#ff8c8c的过渡
130像素以后是纯的#ff8c8c
<style>
div{
width: 200px;
height: 100px;
background-image: linear-gradient(90deg, red 20px, yellow 60px, green 80px, #ff8080 130px);
}
</style>
<div></div>还可以填透明色，
只要是颜色值reb()、rega()都可以
二、放射渐变
radial-gradient()
radial是径向的意思，也就是放射的意思
起止位置可以填百分比或像素
1、设置颜色的位置
radial-gradient(yellow 20px, orange, red) 圆心向外20像素内是黄色
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(yellow 20px, orange, red);
}
</style>
<div></div>radial-gradient( yellow 20px, orange 50px, red )
20像素内是黄色
20像素至50像素是黄色想orange的渐变
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(yellow 20px, orange 50px, red);
}
</style>
<div></div>2、设置圆心的位置
radial-gradient( circle at 100px 0, yellow 10px, orange, red )
at来设置圆心
1). circle 默认是正圆，可以不填
2). at的值设置是圆心的位置，横向位置100px，纵向位置是0
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(circle at 100px 0, yellow 10px, orange, red);
}
</style>
<div></div>( circle at right bottom, yellow, orange, red ) at值也可以填百分数，或是right bottom
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(circle at right bottom, yellow, orange, red);
}
</style>
<div></div>( ellipse at 50px 50px, yellow, orange, red )
1). 设置ellipse椭圆，
2). 位置 50px 50px
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(ellipse at 50px 50px, yellow, orange, red);
}
</style>
<div></div>3、设置放射半径（有四个值）
放射半径就是放射到那个位置
closest-corner 最近的角
closest-side 最近的边
farthest-corner 最远的角
farthest-side 最远的边
radial-gradient( circle closest-corner at 50px 50px, yellow, orange, red ) 放射半径到圆心最近的角截止
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(circle closest-corner at 50px 50px, yellow, orange, red);
}
</style>
<div></div>radial-gradient(circle closest-side at 50px 50px, yellow, orange, red) 到最近的边截止
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(circle closest-side at 50px 50px, yellow, orange, red);
}
</style>
<div></div>radial-gradient( circle farthest-side at 50px 50px, yellow, orange, red ) 到最远的边截止
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(circle farthest-side at 50px 50px, yellow, orange, red);
}
</style>
<div></div>注意
第一个值circle可以不写，但是不能写错值的位置
<style>
div{
width: 200px;
height: 100px;
background-image: radial-gradient(farthest-corner at 50px 50px, yellow, orange, red);
}
</style>
<div></div>三、颜色值
手册 -> 取值与单位 Values and Units -> 颜色(Color)
rgb
rgba Alcha透明度，取值0 - 1之间
HSL
H hue色相，取值0 - 360，120表示绿，240表示蓝
S saturation饱和度，取值0.0% - 100.0%
L lightness亮度，取值0.0% - 100.0%
HSLA
background-color:hsla(360, 50%, 50%, .5);
transparent 透明的值
crrentColor
不设置边框颜色css2会计算color属性的值，然后把值赋给边框颜色，
css3边框颜色直接等于crrentColor，crrentColor去计算color属性的值
<style>
div{
width: 100px;
height: 100px;
border-width: 1px;
border-style: solid;
color: red;
border-color: crrentColor;
/*
css3
不写border-color的知道默认值是crrentColor
*/
}
</style>
<div></div>