css颜色的渐变百分比 linear-gradient
发布日期:2021-09-12 09:57:48 浏览次数:17 分类:技术文章

本文共 680 字,大约阅读时间需要 2 分钟。

    在最近项目过程中,用到了css3的渐变,之前用过很多次渐变,对于使用方法上很简单,本篇文章只研究线性渐变。

语法

background: linear-gradient(directioncolor-stop1color-stop2, ...);

 对于第一个参数direction,渐变的方向也可以是角度,非必输项默认从上到下(0deg,可能有些浏览器采用标准不同会有差异),但是对于color-stop来说最小需要两个颜色,可以是red、blue或 #f00、#00f或 rgba(255, 0, 0, 1)三种方式。

这个是默认方向角度,只有颜色

 

这是设置了一个方向,to left top 向左上渐变

    对于上边这两个例子很好理解,其实对于角度来说也是很好理解,我直接粘了个图过来大家可以看一下就好了

    那我们来用角度写一下第二个向左上渐变的例子,左上方向根据箭头指示也即是-45deg

用角度作为渐变方向

 

百分比

    对于渐变来说,大家都不陌生,但是对于百分比可能有些人没有用过或者正遇到些问题,我们还是先来个列子吧

    可以先不关注我左侧的标注,只关注输出的结果,可以看出和默认的有所区别,那分享一下我对百分比的理解,我觉得这个百分比更像是一条基准线,比如上边我给red设置50%,因为他是第一个所以默认0%也是red,所以说在0~50这个区间就是red~red的过渡也就是他自己本身。在查找下一个基线就是 80%的blue,那在50~80的区间内也就是red~blue的过渡,同理往下查找。根据这个原理我们可以最很多花式的渐变效果。

可以做一个德国国旗

转载地址:https://blog.csdn.net/weixin_38361925/article/details/88708936 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:nodejs调试工具 node-inspector
下一篇:吐血整理发生在身边的真实诈骗案例(精选必读)

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.191.171.38]2022年10月03日 09时27分43秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章