linear-gradient 只要第二个颜色百分比低于前者就没有模糊半径？

linear-gradient 只要第二个颜色百分比低于前者就没有模糊半径？

纯情掉了一地 2017-12-24

源自：CSS3背景与渐变 3-25 编程练习

24

收起

4回答

好帮手慕糖 2017-12-26 10:00:02

你好，可以这里理解。以如下代码为例，就是说，0-20%的时候是红色，20-50%的时候是红色到黄色的渐变，50%以后就是黄色了，如果都是25%的话，那不就是0-25%是红色，25%-25%就渐变。25%以后是黄色，不就是开始就结束了。

 background: -webkit-linear-gradient(red 20%, yellow 50%);

祝学习愉快~

提问者纯情掉了一地 2017-12-25 20:30:09

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
float: left;
margin: 5px;
}
.one{
width: 200px;
height: 200px;
background:-webkit-linear-gradient(45deg,red 25%,yellow 25%) ;
}
.two{
width: 200px;
height: 200px;
background:-webkit-linear-gradient(45deg,red 25%,yellow 26%) ;
}
.three{
width: 200px;
height: 200px;
background:-webkit-linear-gradient(45deg,red 20%,yellow 19%) ;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>

提问者纯情掉了一地 2017-12-25 20:29:22

确切的说应该是在线性渐变中，起始颜色百分比大于等于紧邻结束颜色百分比时，颜色之间无模糊半径？？？？因为老师在做一个DEMO的时候我发现模糊半径不见了，，经过自己尝试好像是有这样的一个规律？？？

好帮手慕糖 2017-12-24 16:36:42

你好，用百分比指定起止色位置。你的意思是第一个大，第二个小的意思吗？若是第一个大，第二个小，不就是还没有还是就结束了么，开始值比结束值还大。若不是这个意思，可以详细描述下需求，便于大家测试与解决问题。

祝学习愉快~

相似问题

渐变百分比大于等于25%时

关于重复渐变

老师第二个阴影设置的前2个0 是什么意思

我想让颜色以圆圈的中心来渐变比如把圆圈分四分每一个半圆为一种颜色渐变这个意思该怎么编？

颜色渐变linear-gradient(yellow,red)黄红的开始位置迷糊

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018

参与学习 1887 人
提交作业 4643 份
解答问题 5760 个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

本课精华内容

问答作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载