html中怎样写渐变⾊代码，纯css简单⼏⾏代码实现颜⾊渐变效
果⾮常漂亮
线性渐变的实例：
线性渐变 - 从上到下(默认情况下)
下⾯的实例演⽰了从顶部开始的线性渐变。起点是红⾊，慢慢过渡到蓝⾊：
www.sinmeng
#grad1 {
height: 200px;
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); /* 标准的语法(必须放在最后) */
}
线性渐变 - 从上到下
从顶部开始的线性渐变。起点是红⾊，慢慢过渡到蓝⾊：
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
线性渐变 - 从左到右
下⾯的实例演⽰了从左边开始的线性渐变。起点是红⾊，慢慢过渡到蓝⾊：
www.sinmeng
#grad1 {
height: 200px;
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); /* 标准的语法(必须放在最后) */
}
线性渐变 - 从左到右
从左边开始的线性渐变。起点是红⾊，慢慢过渡到蓝⾊：
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
线性渐变 - 对⾓
你可以通过指定⽔平和垂直的起始位置来制作⼀个对⾓渐变。
下⾯的实例演⽰了从左上⾓开始(到右下⾓)的线性渐变。起点是红⾊，慢慢过渡到蓝⾊：
www.sinmeng
#grad1 {
height: 200px;
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); /* 标准的语法(必须放在最后) */ }
线性渐变 - 对⾓
从左上⾓开始(到右下⾓)的线性渐变。起点是红⾊，慢慢过渡到蓝⾊：
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
带有指定的⾓度的线性渐变：
www.sinmeng
#grad1 {
height: 100px;
background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(0deg, red, blue); /* 标准的语法(必须放在最后) */
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(90deg, red, blue); /* 标准的语法(必须放在最后) */
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(180deg, red, blue); /* 标准的语法(必须放在最后) */
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(-90deg, red, blue); /* 标准的语法(必须放在最后) */
}
线性渐变 - 使⽤不同的⾓度
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
使⽤多个颜⾊结点
渐变颜代码大全www.sinmeng
#grad1 {
height: 200px;
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); /* 标准的语法(必须放在最后) */
}
#grad2 {
height: 200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */ background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */ }
#grad3 {
height: 200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法(必须放在最后) */
}
3 个颜⾊结点(均匀分布)
7 个颜⾊结点(均匀分布)
3 个颜⾊结点(不均匀分布)
注意： 当未指定百分⽐时，颜⾊结点不会⾃动均匀分布。
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
下⾯的实例演⽰了如何设置多个颜⾊结点：
下⾯的实例演⽰了如何创建⼀个带有彩虹颜⾊和⽂本的线性渐变：
www.sinmeng
#grad1 {
height: 55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */
}
渐变背景
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
使⽤透明度(transparent)
下⾯的实例演⽰了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红⾊：
www.sinmeng
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
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)); /* 标准的语法(必须放在最后) */
}
线性渐变 - 透明度
为了添加透明度，我们使⽤ rgba() 函数来定义颜⾊结点。rgba() 函数中的最后⼀个参数可以是从 0 到 1 的值，它定义了颜⾊的透明度：0表⽰完全透明，1 表⽰完全不透明。
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
重复的线性渐变
repeating-linear-gradient() 函数⽤于重复线性渐变：
www.sinmeng
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法(必须放在最后) */
}
重复的线性渐变
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
CSS3 径向渐变
径向渐变由它的中⼼定义。
为了创建⼀个径向渐变，你也必须⾄少定义两种颜⾊结点。颜⾊结点即你想要呈现平稳过渡的颜⾊。同时，你也可以指定渐变的中⼼、形状(原型或椭圆形)、⼤⼩。默认情况下，渐变的中⼼是 center(表⽰在中⼼点)，渐变的形状是 ellipse(表⽰椭圆形)，渐变的⼤⼩是 farthest-corner(表⽰到最远的⾓落)。
径向渐变的实例：
径向渐变 - 颜⾊结点均匀分布(默认情况下)
www.sinmeng
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法(必须放在最后) */
}
径向渐变 - 颜⾊结点均匀分布
注意： Internet Explorer 9 及之前的版本不⽀持渐变。
径向渐变 - 颜⾊结点不均匀分布
www.sinmeng
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论