CSS3：线性渐变+各种分布

2017-10-22 阅读：2701 类型：前端分类：style 标签： style

CSS3：线性渐变+各种分布

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">   
<title>网页title</title>   
<style>  
#grad1 {  
    height: 40px;  
    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: 40px;  
    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: 40px;  
    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: 40px;  
    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); /* 标准的语法（必须放在最后） */  
}  
  
#grad5 {  
    height: 40px;  
    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); /* 标准的语法（必须放在最后） */  
}  
  
#grad6 {  
    height: 40px;  
    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); /* 标准的语法（必须放在最后） */  
}  
  
#grad7 {  
    height: 40px;  
    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%); /* 标准的语法（必须放在最后） */  
}  
  
#grad8 {  
    height: 40px;  
    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); /* 标准的语法（必须放在最后） */  
}  
</style>  
</head>  
<body>  
  
<h3>线性渐变 - 使用不同的角度</h3>  
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>  
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>  
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>  
<div id="grad4" style="color:white;text-align:center;">-90deg</div>  
  
<h3>3 个颜色结点（均匀分布）</h3>  
<div id="grad5"></div>  
  
<h3>7 个颜色结点（均匀分布）</h3>  
<div id="grad6"></div>  
  
<h3>3 个颜色结点（不均匀分布）</h3>  
<div id="grad7"></div>  
  
<br>  
<div id="grad8" style="text-align:center;margin:auto;color:#FFFFFF;font-size:20px;font-weight:bold">  
渐变背景  
</div>  
  
</body>  
</html>