CSS背景属性之颜色渐变

汪叽家的兔子羡

已于 2022-08-17 17:29:35 修改

阅读量5.9w

点赞数 23

文章标签： css3 css html

于 2020-10-25 14:47:22 首次发布

本文链接：https://blog.csdn.net/LuoYi_ly_/article/details/109273094

版权

颜色渐变

颜色渐变其实在网页设计中并不是特别常见，但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况，例如：
在这里插入图片描述
这样的设计解决方案并不是只可以使用颜色渐变，我们可以使用两个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);

在这里插入图片描述

汪叽家的兔子羡

关注

23
点赞
踩
90

收藏

觉得还不错? 一键收藏
0
评论
CSS背景属性之颜色渐变

这样的设计解决方案并不是只可以使用颜色渐变，我们可以使用两个div拼接，将文字放置两个div中间，但是有颜色渐变的话，我们就不需要那么复杂的解决。红色，黄色，绿色三色在0-100之间依照顺序有过渡的变化。0为红色，0-50为红色到黄色渐变， 100黄色。这里的 to top是默认的值，颜色渐变会从上而下由黄色到绿色有过渡渐变。下面两张效果图，前者是to right，后者是to left。效果图如下，左边是没有角度的，右边是45deg的。颜色渐变可以分为两种，线性渐变和径向渐变。...
复制链接

扫一扫