1、常规垂直线性渐变，颜色从#fb3 过渡到#58a：
background: linear-gradient(#fb3, #58a);
2、指定方向渐变
background: linear-gradient(to right, #ccc,#58a);
3、说一下百分比得了，遇坑了细研究一番
background:linear-gradient(red 30%,orange 50%);
没图没真相，话语来叙述，这里的百分比指的不是要渲染的区域是30%，而是指的从指定的百分比开始渲染，第一个值大于0%，前面的颜色会默认为第一个颜色，第二个百分比指定从50%开始渲染，如果后续没参数，将至结尾。不设置百分比时，会默认将所有填写的值等额分开。百分比渐变的区域为二值之间，30%-50%为渐变渲染区域，所前所后卫各自纯色
如果需要实色叠加，每个值需要设置两次，即起点和终点
image.png
基本妥了，当然除了老IE（11以下）这个老顽固，放心的造轮子吧
渐变 线性渐变 linear-gradient linear-gradient:(angle,color val...
1、常规垂直线性渐变，颜色从#fb3 过渡到#58a： 2、指定方向渐变 3、说一下百分比得了，遇坑了细研究一番 ...
线性渐变linear-gradient的表达式：linear-gradient( [ | ,]? [, ...
线性渐变 linear-gradient 径向渐变 radial-gradient 和 重复渐变 repeati...
backgroud:linear-gradient(#.#.)背景渐变颜色
css渐变分为：1.线性渐变（linear-gradient） 2.径向渐变（radi...
背景渐变色：background linear-gradient 线性渐变色radial-gradent 径向渐变...
渐变分线性渐变(linear-gradient)和径向渐变(radial-gradient);这里写的代码省去了-...
CSS3渐变共有3种：（1）线性渐变（linear-gradient）；（2）径向渐变（radial-gradie...
线性渐变 linear-gradient 渐变分4种 线性渐变 径向渐变 重复线性渐变 重复径向渐变重点学习线性渐...
本文标题：渐变linear-gradient中的百分比
本文链接：https://www.haomeiwen.com/subject/bhayeftx.html
网友评论