CSS3渐变的背景色
2021-01-17 05:11
标签：bottom rgba 效果 repeat http info 用法 透明 比较 我们在开发的过程中经常会遇到背景色是渐变的背景色，一般可以制作背景图，如果仅仅是简单的线性变换的背景，今天我就遇到了，其实完全可以用CSS3的渐变来实现这个效果。这个过程由浏览器来生成，不用去加载静态的资源，提高性能。 渐变有两种： 线性渐变也是比较常见的渐变方式 为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。 基础的语法就是这样的： 默认的是从上到下的加入你不设置方向的话 从左到右 从左上角到右下角 还有一种是带有角度的自定义的渐变 当然还有多个颜色的渐变 CSS3的渐变还支持带有透明度的写法 重复的线性变化（其实这个也有的地方用到） 下面的是径向渐变 emmmmmmm我不用我也不想写，哈哈哈哈 就写一个基础的用法吧！！！ CSS3渐变的背景色 标签：bottom rgba 效果 repeat http info 用法 透明 比较 原文地址：https://www.cnblogs.com/dongdong1996/p/13371302.html
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
#grad {
background-image: linear-gradient(#e66465, #9198e5);
}
#grad {
background-image: linear-gradient(to right, red , yellow);
}
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
#grad {
/* 标准的语法 */
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
#grad {
/* 标准的语法 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
background-image: radial-gradient(shape size at position, start-color, ..., last-color);