颜色渐变
- 颜色渐变分为线性渐变和径向渐变
- 线性渐变：自左向右、自右向左、自上向下（默认）、自下向上、对角设定等等
- 下面给出一个自上而下线性渐变的定义：
#d1{
weight:200px; height:200px; background-img:linear-gradient(black,white); } - 效果如下：
- 自左向右：
#d2{
height:200px; background-img:linear-gradient(to right,red,green); } - 效果如下：
- 方向定义：向右to right , 向左to left , 向上to top
- 也可以定义一个对角渐变：
- to bottom right（左上 – 右下） to top left（右下 – 左上）其他依次类推
- 定义沿着某个角度的颜色渐变
- 角度是指我们所设置的渐变线与水平线之间的夹角角度，看图：
- 上图0deg即为自下向上的渐变线，90deg即为自左往右的渐变线
- 根据设定特殊角度的渐变线就可以实现想要的效果
- 透明度设置：
- transparent：添加透明度可以设置rgba() 函数中的最后一个参数
- 透明度定义是从 0 到 1 的值。0 表示完全透明，1 表示完全不透明。
- 重复线性渐变：repeating-linear-gradient()
- 重复径向渐变直到填充满我们设置好的盒子宽高
- 径向渐变：
-
background-image: radial-gradient - 径向渐变由中心定义，同样必须至少有两个颜色节点
- 可以设置渐变中心、形状（圆形/椭圆）、大小 ，默认情况下实在中心center
#d2{
width: 200px; height: 200px; background-image:radial-gradient(green,blue,yellow,skyblue,red); } - 效果如下：
- 也可以设置颜色的不均匀分布
- 在每个颜色后添加颜色的占比百分比
#d3 {
width: 200px; height: 200px; background-image: radial-gradient(red 5%, yellow 40%, green 70%); } - 设置形状shape参数，可以是circle圆形或者ellipse椭圆形
#d4 {
background-image: radial-gradient(circle, red, yellow, green); } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231613.html原文链接：https://javaforall.net
