请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
线性渐变背景,两种颜色之间的过渡是均匀的、逐渐的、平缓的,试观察下面四个盒子的线性渐变效果,它们的背景都是由青色过渡到粉红色,渐变方向依次是自左下到右上、自右下到左上、自左到右、自右到左:
background语句分别为:
background: linear-gradient(to right top, teal, pink);
background: linear-gradient(to left top, teal, pink);
background: linear-gradient(to right, teal, pink);
background: linear-gradient(to top, teal, pink);
这叫“软线过渡”,其实无线;与之对应的是“硬线过渡”,其实无渐变过渡。硬线过渡有分明的“三八线”,试看:
代码分别是:
background: linear-gradient(to right top, teal 50%, pink 50%);
background: linear-gradient(to left top, teal 50%, pink 50%);
background: linear-gradient(to right, teal 50%, pink 50%);
background: linear-gradient(to top, teal 50%, pink 50%);
比较软线与硬线,区别在于后者给两种颜色都规定了相同的数值(可以是像素和百分比),第一个颜色青色,表达式为 teal 50%,表示其位置到50%处终止,第二个颜色粉红色,表达式为 pink 50%,表示其位置从50%处开始。两个颜色,前者的终止位置和后者的开始位置共享一个地方,这个地方就是三八线,异常明晰。
|