文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载linear-gradient()是 CSS 内置的渐变函数仅需一行代码即可为任意元素的背景填充平滑的线性渐变色是现代 Web 界面设计中高频使用的基础视觉技巧。本文以 TIL 仓库 css/style-a-background-with-a-linear-gradient.md 中的两色渐变示例为起点完整覆盖其核心用法并延伸讲解渐变方向、角度、多色渐变、透明度与颜色停靠点等实战参数帮助你在按钮、页面横幅、卡片等场景中直接落地可运行代码。最简单的两色线性渐变linear-gradient()在函数最简形式下只需要传入两个颜色值浏览器就会在默认的**垂直方向从上到下**上绘制一条平滑过渡的渐变。仓库原文给出的完整示例代码如下.container { background: linear-gradient(#00449e, #e66465); }将这段样式应用到 HTML 后所有带container类的元素其背景都会从#00449e深蓝平滑过渡到#e66465珊瑚红。其中#00449e是渐变起点颜色默认位于顶部#e66465是渐变终点颜色默认位于底部。该声明写在background简写属性中等价于把它交给background-image属性——渐变本质上被浏览器当作一张由函数生成的背景图像来处理。配套的 HTML 结构只需要一个普通元素即可验证效果div classcontainer渐变背景示例/div你可以在 CodePen 等在线编辑器中直接粘贴这段 CSS 观察效果也可以将.container替换成body、header等任意选择器让整个页面或特定区块拥有渐变背景。控制渐变方向关键词与角度默认的从上到下只是最简单的形态。linear-gradient()的第一个参数可以用来指定渐变的方向常见写法有两种方向关键词——使用to加方位词组合/* 从左到右 */ .hero { background: linear-gradient(to right, #00449e, #e66465); } /* 沿对角线从左上角到右下角 */ .diagonal { background: linear-gradient(to bottom right, #00449e, #e66465); }角度值——使用deg单位精确控制方向0deg表示从下到上90deg表示从左到右角度按顺时针递增.angled { background: linear-gradient(45deg, #00449e, #e66465); }从实现原理看linear-gradient()生成的是一条以指定角度穿越元素盒模型的渐变轴颜色沿该轴的垂直方向依次过渡未指定方向时浏览器使用默认值180deg即自上而下这正是仓库原示例垂直两色渐变的由来。多点渐变与颜色停靠位置linear-gradient()并不局限于两个颜色可以传入任意数量的颜色浏览器会均匀地在它们之间插值过渡.sunset { background: linear-gradient(to right, #ff9a9e, #fad0c4, #a18cd1); }还可以用**百分比或长度**显式指定某个颜色停靠点的位置从而精细控制每种颜色出现的区域宽度.bar { background: linear-gradient( to right, #00449e 0%, #e66465 50%, #f8e9a1 100% ); }上例中#00449e从0%处开始、#e66465在50%处、#f8e9a1在100%处结束三个停靠点把渐变均匀切分为两个过渡区间。省略位置时浏览器会将各颜色按等距规则自动分布。让渐变带透明度HSL、RGBA 与 alpha渐变色同样可以携带透明度alpha 通道从而让渐变背景透出下层内容或叠加出层次感。仓库中的 css/define-hsl-colors-with-alpha-values.md 详细介绍了现代hsl()语法用斜杠分隔 alpha 值的写法它可以与linear-gradient()直接组合.overlay { background: linear-gradient( to bottom, hsl(220deg 100% 50% / 0), hsl(220deg 100% 50% / 0.8) ); }上面的写法会生成一个从完全透明到 80% 不透明度的蓝色渐变常用于图片上方的文字可读性遮罩层。也可以使用rgba()达到同样效果.overlay { background: linear-gradient(to bottom, rgba(0, 68, 158, 0), rgba(0, 68, 158, 0.8)); }渐变与其他背景技术组合使用渐变本质上是一张图像因此它可以与背景图片、纯色背景等机制协同工作这正好呼应了仓库中另一篇笔记的用法——css/conditional-styling-for-unsupported-css-features.md 展示了supports条件下background-image作为回退方案的写法。例如可以给一张真实图片叠加半透明渐变以增强前景内容可读性.banner { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(banner.png); background-size: cover; }同时渐变也可以作为动态背景的基础仓库中的 css/create-a-pulsing-background-with-css-animation.md 展示了用keyframes在两种背景颜色间来回过渡的脉冲动画而 css/animate-smoothly-between-two-background-colors.md 进一步解释了动画状态下浏览器如何自动插值。如果将animation与linear-gradient结合即可做出渐变不断流动的视觉效果这是页面横幅与品牌宣传区的常见设计手法。快速参考常用写法汇总需求写法两色垂直渐变最简background: linear-gradient(#00449e, #e66465);水平渐变background: linear-gradient(to right, #00449e, #e66465);对角渐变background: linear-gradient(to bottom right, #00449e, #e66465);指定角度background: linear-gradient(45deg, #00449e, #e66465);多色渐变background: linear-gradient(to right, #00449e, #e66465, #f8e9a1);带停靠点位置background: linear-gradient(to right, #00449e 0%, #e66465 50%, #f8e9a1 100%);带透明度的遮罩background: linear-gradient(to bottom, rgba(0,68,158,0), rgba(0,68,158,0.8));小结从仓库原笔记出发linear-gradient(#00449e, #e66465)这一行代码已经足以让元素获得美观的垂直两色渐变而通过方向关键词、角度、多颜色与停靠点、alpha 透明度等参数linear-gradient()可以覆盖横幅、按钮、遮罩、动态背景等绝大多数日常场景。结合本仓库 css 目录下的 HSL 语法、supports回退与 CSS 动画等相邻主题你可以把最简单的渐变扩展为一套完整的视觉设计工具链。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐CSS 背景与渐变实战指南从背景色、背景图片到线性渐变的完整解析CSS 背景与渐变实战指南从背景色、背景图片到线性渐变的完整解析 导读 背景background是网页视觉层中最容易被低估的部分——它往往在元素布局看起文档教程教育如何快速配置node-startup让Node.js应用随Linux系统自动重启如何快速配置node startup让Node.js应用随Linux系统自动重启 Node.js应用部署到Linux服务器后最头疼的问题之一就是服务器重启后运维freeCodeCamp 视觉设计课程实战用 CSS linear-gradient() 打造平滑的线性渐变背景freeCodeCamp 视觉设计课程实战用 CSS linear gradient 打造平滑的线性渐变背景 本文以 freeCodeCamp 课程文件 Cr前端后端教育创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考