登录
首页 >  文章 >  前端

CSS 渐变：线性渐变()

来源：dev.to

时间：2025-01-09 09:30:30 287浏览 收藏

从现在开始，努力学习吧！本文《CSS 渐变：线性渐变()》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

linear-gtradient() css 函数创建线性渐变作为背景
语法是：
一个 CSS 选择器{
背景图像：线性渐变（角度，颜色1，颜色2，颜色3，......）;
}

angle ：可选是对渐变方向的引用
默认为 180deg
我们可以使用这些关键字代替 deg 来确定方向：
*向右：等于 90 度
**向左：等于 270 度
* 到顶部：等于 0deg
**到底部：等于 180 度（可选，因为 l Linear-radient() 中的度数是到底部
**color1 ：需要这个值由一个颜色值组成，后跟
一个或两个位置的可选颜色停止点（0% 到 100% 之间的百分比或沿渐变轴的长度）。

<!DOCTYPE html>

坡度 {

高度：200px；
/* 倾斜 45 度的渐变，
开始为蓝色，结束为红色 /
/
/*
背景图像：线性渐变（45度，蓝色，红色）；
*/

/* 从右下角到左上角的渐变，
开始为蓝色，结束为红色 /
/
/*
背景图像：线性渐变（到左上角，蓝色，红色）
*/

背景图像：线性渐变（向右，红色，50%，蓝色）

/*
多位置色标：倾斜 45 度的渐变，
左下半部为红色，右上半部为蓝色，
带有一条硬线，渐变从红色变为蓝色
*/

/*
背景图像：线性渐变（
45度，
红色 0 50%，

蓝色 50% 100%);

*/

到这里，我们也就讲完了《CSS 渐变：线性渐变()》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>