win7怎么建设网站,做招标网站 如何,业余做网站,网站建设制作德州颜色渐变
颜色渐变其实在网页设计中并不是特别常见#xff0c;
但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况#xff0c;
例如#xff1a;这样的设计解决方案并不是只可以使用颜色渐变#xff0c;我们可以使用两个div拼接#xff0c;将文字放…颜色渐变
颜色渐变其实在网页设计中并不是特别常见
但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况
例如这样的设计解决方案并不是只可以使用颜色渐变我们可以使用两个div拼接将文字放置两个div中间但是有颜色渐变的话我们就不需要那么复杂的解决。
颜色渐变可以分为两种线性渐变和径向渐变。
线性渐变
有过渡色渐变backgroundlinear-gradient( red , yellow , green ); 红色 黄色 绿色三色在0-100之间依照顺序有过渡的变化 backgroundlinear-gradient(red 0%,yellow 20%,yellow 100%); 0为红色0-50为红色到黄色渐变 100黄色 这两者实现的效果如下图 无过渡色渐变backgroundlinear-gradient(red 0%,red 50%,yellow 50%,yellow 100%); 0-50%都为红色50-100都为黄色 简写为backgroundlinear-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;
}
stylebodydiv calssnav首页/div
/body角度渐变backgroundlinear-gradient(45deg,red,yellow,green); 效果图如下左边是没有角度的右边是45deg的 径向渐变 括号中的颜色编写方式与线性渐变是一样的backgroundradial-gradient(red,green);backgroundradial-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);
