微信小程序中的渐变色

前言

更多内容，请访问我的个人博客。

CSS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变 - 从上到下（默认情况下）

.gradual{background: linear-gradient(red, orange);
}
复制代码

线性渐变 - 从左到右

.gradual{background: linear-gradient(to right, red, orange);
}
复制代码

线性渐变 - 对角

.gradual{background: linear-gradient(to bottom right, red, orange);
}
复制代码

线性渐变 - 带有指定的角度

.gradual{background: linear-gradient(60deg, red, orange);
}
复制代码

线性渐变 - 从上到下，带有多个颜色结点

.gradual{background: linear-gradient(red, orange, yellow);
}
复制代码

线性渐变 - 带有彩虹颜色

.gradual{background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
复制代码

线性渐变 - 带有透明度

.gradual{background: linear-gradient(rgba(255,0,0,1), rgba(255,0,0,0));
}
复制代码

重复线性渐变 - repeating-linear-gradient()函数

.gradual{background: repeating-linear-gradient(red, orange, yellow 10%);
}
复制代码

径向渐变 - 颜色结点均匀分布（默认情况下）

.gradual{background: radial-gradient(red, orange, yellow);
}
复制代码

径向渐变 - 颜色结点不均匀分布

.gradual{background: radial-gradient(red 5%, orange 20%, yellow 80%);
}
复制代码

重复径向渐变 - repeating-radial-gradient()函数

.gradual{background: repeating-radial-gradient(red, orange, yellow 10%);
}
复制代码

转载于:https://juejin.im/post/5c7ea25a5188251b8a53ab02

微信小程序中的渐变色相关推荐

微信小程序实用工具——渐变色按钮（一）
微信小程序实用工具--渐变色按钮(一) 文章目录微信小程序实用工具--渐变色按钮(一) 前言按钮一按钮二按钮三按钮四按钮五按钮六按钮七按钮八前言平时我们在开发中的按钮色调过于单调 ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...
在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压第二步:进入https:// ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...

微信小程序中的渐变色

前言

线性渐变 - 从上到下（默认情况下）

线性渐变 - 从左到右

线性渐变 - 对角

线性渐变 - 带有指定的角度

线性渐变 - 从上到下，带有多个颜色结点

线性渐变 - 带有彩虹颜色

线性渐变 - 带有透明度

重复线性渐变 - repeating-linear-gradient()函数

径向渐变 - 颜色结点均匀分布（默认情况下）

径向渐变 - 颜色结点不均匀分布

重复径向渐变 - repeating-radial-gradient()函数

微信小程序中的渐变色相关推荐

最新文章

热门文章