0

0

详解CSS3中lineaer-gradient使用方法

Y2J

Y2J

发布时间:2017-05-19 15:10:20

|

2826人浏览过

|

来源于php中文网

原创

语法:

 = linear-gradient([ [  | to  ] ,]? top>[, ]+)

 = [left | right] || [top | bottom]

 =  [  |  ]?

取值:

下述值用来表示渐变的方向,可以使用角度或者关键字来设置:

立即学习前端免费学习笔记(深入)”;

用角度值指定渐变的方向(或角度)。

to left:

设置渐变为从右到左。相当于: 270deg

to right:

设置渐变从左到右。相当于: 90deg

to top:

设置渐变从下到上。相当于: 0deg

to bottom:

设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。

用于指定渐变的起止颜色:

指定颜色。

用长度值指定起止色位置。不允许负值

GPT Detector
GPT Detector

在线检查文本是否由GPT-3或ChatGPT生成

下载

用百分比指定起止色位置。

说明:

用线性渐变创建图像。

如果想创建以对角线方式渐变的图像,可以使用 to top left 这样的多关键字方式来实现。

用默认的渐变方向绘制一个最简单的线性渐变

示例代码:

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

兼容性:

1.png

1. 使用过时的语法:-webkit-gradient(linear,…)

2. IE6.0-9.0使用私有滤镜来实现该效果: progid:DXImageTransform.Microsoft.Gradient()





linear-gradient()_CSS参考手册_web前端开发参考手册系列




【相关推荐】

1. CSS3免费视频教程

2. 深入详解CSS3中斜向线性渐变lineaer-gradient

3. 关于CSS3中linear-gradient参数的详解

4. CSS linear-gradient() 的语法详解

5. CSS3中linear-gradient的实例详解

相关专题

更多
虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

29

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

20

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

37

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程,阅读专题下面的文章了解更多详细操作。

6

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法,阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

6

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程,阅读下面的文章了解更多详细内容。

5

2025.12.25

ps入门教程
ps入门教程

本专题整合了ps相关教程,阅读下面的文章了解更多详细内容。

4

2025.12.25

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

218

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4万人学习

HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.5万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号