css3实现背景渐变的方法

我们一般实现背景渐变的方法都是用图片来实现，这段时间在做项目中找到了一种用css3用颜色实现背景渐变的方法，主要支持Firefox和Safari/Chrome 等浏览器，ie用滤镜的方法来解决渐变的问题：

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)，

 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数：第一个参数表示方向，可以是top,表示从上到下，left表示从左到右，left top 从左上角到右下角；第二个参数和第三个参数分别表示起点颜色和终点颜色，在里面也可以插入更多的参数颜色

可以写成background:-moz-lineat-gradient(top,#ccc,#000);

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

参数：第一种的书写方法里的参数跟-moz-linear-gradinent的参数是一样的；

第二种参数里的type表示的是渐变的类型，可以是linear渐变或者radia径向渐变；第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);

参数：第一参数表示渐变的方向，第二个参数和第三个参数分别表示渐变颜色的起点和终点；

在ie中解决渐变的方法主要是利用滤镜：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

参数：IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。

css3实现背景渐变的方法相关推荐

CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
Css3: gradient背景渐变
Css3: gradient背景渐变原文链接:http://kk073000.blog.163.com/blog/static/34826942012123111322691/ css3实现了背景渐 ...
css3 Gradient 背景渐变
学习笔记来源网:https://www.w3cplus.com/content/css3-gradient 起始点(Starting Point)的工作方式类似于background position ...
背景渐变如何设置透明度
背景渐变如何设置透明度项目最近这几天正在做不同主题的颜色配置方案,要根据用户输入的颜色来配置整个主题的颜色,让人头疼的是,其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变,也就是说,要根 ...
css背景渐变的技巧与方法
[发帖际遇]: the_truth玩宠物的时候不幸损失威望13. css背景渐变的技巧与方法用css实现网页背景渐变的代码如下: 一.从上往下渐变 Example Source Code: body ...
HTML中button怎么填充GIF,css3给按钮添加背景渐变动画
css3给按钮添加背景渐变动画 button { color:#FFF; font-size:16px; outline:none; width:300px; height:48px; backgro ...
3dmax给模型添加渐变背景有哪些方法
3dmax给模型添加渐变背景有哪些方法 3dmax软件给模型添加渐变背景有什么方法?3dmax软件模型制作完成后,渲染模型背景黑色的居多.为了让模型更加逼真,我们也可以将背景颜色改为渐变背景.那么,今 ...
css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置 ...
html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
css3设置边框颜色渐变的方法有哪些发布时间:2020-09-14 14:51:54 来源:亿速云阅读:110 作者:小新 css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经 ...

css3实现背景渐变的方法

css3实现背景渐变的方法相关推荐

最新文章

热门文章