CSS3-背景颜色渐变属性-路羽博客-第1张图片

CSS3-背景颜色渐变属性

CSS3-背景颜色渐变属性-路羽博客-第2张图片

作者: 路羽

原创资源分享博客

CSS3-背景颜色渐变属性-路羽博客-第3张图片微信小程序

路羽博客 资源分享

       

前言

主要是CSS3中的 渐变(gradients)可以让你在两个或多个指定的颜色之间实现显示平稳的过渡。

以下简单记录以下几种方式。

CSS3-背景颜色渐变属性-路羽博客-第4张图片

1.线性渐变

必须至少定义两种颜色节点。颜色节点即想要呈现平稳过渡的颜色。

线性渐变,从上到下

从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:

height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(#e66465, #9198e5);

CSS3-背景颜色渐变属性-路羽博客-第5张图片

2.线性渐变,从左到右

从左边开始的线性渐变。起点是红色,慢慢过渡到黄色:

height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to right, red , yellow);

CSS3-背景颜色渐变属性-路羽博客-第6张图片

3.线性渐变,对角
从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到黄色:

height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red , yellow);

CSS3-背景颜色渐变属性-路羽博客-第7张图片

分享到:
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客
原文地址: 《CSS3-背景颜色渐变属性》 发布于2022-3-13

评论

          
       
切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏