颜色渐变
颜色渐变其实在网页设计中并不是特别常见，但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况，例如：
这样的设计解决方案并不是只可以使用颜色渐变，我们可以使用两个div拼接，将文字放置两个div中间，但是有颜色渐变的话，我们就不需要那么复杂的解决。
颜色渐变可以分为两种，线性渐变和径向渐变。
线性渐变
1.有过渡色渐变：
background：linear-gradient( red , yellow , green );
红色 ，黄色 ，绿色三色在0-100之间依照顺序有过渡的变化
background：linear-gradient(red 0%,yellow 20%,yellow 100%);
0为红色，0-50为红色到黄色渐变， 100黄色
这两者实现的效果如下图：
2.无过渡色渐变：
background：linear-gradient(red 0%,red 50%,yellow 50%,yellow 100%);
0-50%都为红色，50-100都为黄色
简写为：
background：linear-gradient(red 50%,yellow 50%);
使用无过渡渐变实现我们开始所说的效果
<style>
.nav{
width: 150px;
height: 100px;
background:linear-gradient(#99d9ea 50%,#00a2e8 50%);
line-height: 98px;
text-align: center;
color: white;
}
<style>
<body>
<div calss="nav">首页</div>
</body>
3.角度渐变：
background：linear-gradient(45deg,red,yellow,green);
效果图如下，左边是没有角度的，右边是45deg的
径向渐变
括号中的颜色编写方式与线性渐变是一样的：
background：radial-gradient(red,green);
background：radial-gradient(circle,red,green);
这两个差别不会很大，前者是横向的，后者是纵向的，下面的效果图为了观察更加明显是使用的另外两个颜色：
重复渐变
重复的线性渐变：background:repeating-linear-gradient(to top,#ff0,#0f0);
重复的径向渐变：background:repeating-lradial-gradient(to right,#ff0,#0f0);
这里的 to top是默认的值，颜色渐变会从上而下由黄色到绿色有过渡渐变
下面两张效果图，前者是to right，后者是to left
background:repeating-linear-gradient(to left,#ff0,#0f0);
background:repeating-linear-gradient(to right,#ff0,#0f0);
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
