CSS3:线性渐变+各种分布

2017-10-22   阅读:2350   分类:前端    标签: 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>


【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/49.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×