温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3用Gradients实现线性渐变

发布时间:2021-09-13 10:58:22 来源:亿速云 阅读:127 作者:chen 栏目:开发技术

这篇文章主要讲解了“css3用Gradients实现线性渐变”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3用Gradients实现线性渐变”吧!

代码块

html页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css3 Gradients</title>
</head>
<body>
<div class="grad-repeating-lg">重复的线性渐变</div>
<div class="grad-rgba-0-1">从左边开始的线性渐变。起点是完全透明,慢慢过渡到完全不透明的红色</div>
<div class="grad-r-o-y-g-b-i-v">带有彩虹颜色和文本的线性渐变</div>
<div class="grad-red-green-blue">带有多个颜色结点的从上到下的线性渐变</div>
<div class="grad-45-deg">45角度的线性渐变</div>
<div class="grad-0-deg">0角度的线性渐变</div>
<div class="grad-90-deg">90角度的线性渐变</div>
<div class="grad-180-deg">180角度的线性渐变</div>
<div class="grad-FF69B4-2F4F4F">从右上角开始(到左下角)的线性渐变</div>
<div class="grad-008B8B-DEB887">从左上角开始(到右下角)的线性渐变</div>
<div class="grad-A52A2A-6495ED">从左边开始的线性渐变。起点是#A52A2A,慢慢过渡到#6495ED</div>
<div class="grad-red-blue">从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色</div>
</body>
</html>
css样式:
<style type="text/css" media="screen">
div{
width: 800px;
height: 600px;
padding: 20px;
margin:50px;
}
.grad-red-blue{
background:-webkit-linear-gradient(red,blue);
background:-o-linear-gradient(red,blue);
background:-moz-linear-gradient(red,blue);
background:linear-gradient(red,blue);
}
.grad-A52A2A-6495ED{
background:-webkit-linear-gradient(left,#A52A2A,#6495ED);
background:-o-linear-gradient(right,#A52A2A,#6495ED);
background:-moz-linear-gradient(right,#A52A2A,#6495ED);
background:linear-gradient(to right,#A52A2A,#6495ED);
}
.grad-008B8B-DEB887{
background:-webkit-linear-gradient(left top,#008B8B,#DEB887);
background:-o-linear-gradient(bottom right,#008B8B,#DEB887);
background:-moz-linear-gradient(bottom right,#008B8B,#DEB887);
background:linear-gradient(to bottom right,#008B8B,#DEB887);
}
.grad-FF69B4-2F4F4F{
background:-webkit-linear-gradient(right top,#FF69B4,#2F4F4F);
background:-o-linear-gradient(bottom left ,#FF69B4,#2F4F4F);
background:-moz-linear-gradient(bottom left,#FF69B4,#2F4F4F);
background:linear-gradient(to bottom left,#FF69B4,#2F4F4F);
}
.grad-180-deg{
background:-webkit-linear-gradient(180deg,#0ff,#B8860B);
background:-o-linear-gradient(180deg,#0ff,#B8860B);
background:-moz-linear-gradient(180deg,#0ff,#B8860B);
background:linear-gradient(180deg,#0ff,#B8860B);
}
.grad-90-deg{
background:-webkit-linear-gradient(90deg,#F0F8FF,#B8860B);
background:-o-linear-gradient(90deg,#F0F8FF,#B8860B);
background:-moz-linear-gradient(90deg,#F0F8FF,#B8860B);
background:linear-gradient(90deg,#F0F8FF,#B8860B);
}
.grad-0-deg{
background:-webkit-linear-gradient(0deg,#F0F8FF,#7FFFD4);
background:-o-linear-gradient(0deg,#F0F8FF,#7FFFD4);
background:-moz-linear-gradient(0deg,#F0F8FF,#7FFFD4);
background:linear-gradient(0deg,#F0F8FF,#7FFFD4);
}
.grad-45-deg{
background:-webkit-linear-gradient(30deg,red,blue);
background:-o-linear-gradient(30deg,red,blue);
background:-moz-linear-gradient(30deg,red,blue);
background:linear-gradient(30deg,red,blue);
}
.grad-red-green-blue{
background:-webkit-linear-gradient(red,green,blue);
background:-o-linear-gradient(red,green,blue);
background:-moz-linear-gradient(red,green,blue);
background:linear-gradient(red,green,blue);
}
.grad-r-o-y-g-b-i-v{
background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
}
.grad-rgba-0-1{
background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
background:-o-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
background:-moz-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
}
.grad-repeating-lg{
/* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</style>

感谢各位的阅读,以上就是“css3用Gradients实现线性渐变”的内容了,经过本文的学习后,相信大家对css3用Gradients实现线性渐变这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI