css3 gradient 渐变

分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 1.线性渐变在Mozilla 下应用   语法:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )   参数;共三个参数,第一个参数表示为线性渐变的方向,top是从上往下,left 是从左到右 如果定义成left top,   那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。

例如:   background: -moz-linear-gradient( top,#ccc,#000);

2.线性渐变在Webkit下的应用

  语法:-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )     //最新发布书写语法       -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)     //老式语法书写规则   参数:-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),     可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别     表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)     和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受     两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。   老式书写方法:background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));   新式书写方法:-webkit-linear-gradient(top,#ccc,#000);

3.线性渐变在Oper 下的应用:   语法:-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);   实例:background: -o-linear-gradient(top,#ccc, #000);

4.线性渐变在Trident(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表示水平渐变。

1、开始于center(水平方向)和top(垂直方向)也就是Top → Bottom:   /* Firefox 3.6+ */     background: -moz-linear-gradient(top, #ace, #f96);   /* Safari 4-5, Chrome 1-9 */   /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */     background: -webkit-gradient(linear,top,from(#ace),to(#f96));   /* Safari 5.1+, Chrome 10+ */     background: -webkit-linear-gradient(top, #ace, #f96);   /* Opera 11.10+ */     background: -o-linear-gradient(top, #ace, #f96);

2、始于left(水平方向)和center(垂直方向)也是就Left → Right:   /* Firefox 3.6+ */     background: -moz-linear-gradient(left, #ace, #f96);   /* Safari 5.1+, Chrome 10+ */     background: -webkit-linear-gradient(left, #ace, #f96);   /* Opera 11.10+ */     background: -o-linear-gradient(left, #ace, #f96);

3、起始于left(水平方向)和top(垂直方向):   background: -moz-linear-gradient(left top, #ace, #f96);   background: -webkit-linear-gradient(left top, #ace, #f96);   background: -o-linear-gradient(left top, #ace, #f96);

4、角度(Angle):   没有角度的示例代码:     background: -moz-linear-gradient(left, #ace, #f96);     background: -webkit-linear-gradient(left,#ace,#f96);     background: -o-linear-gradient(left, #ace, #f96);   加上30度的角度代码:     background: -moz-linear-gradient(left 30deg, #ace, #f96);     background: -webkit-gradient(linear, 0 0, 100% 100%, from(#ace),to(#f96));     background: -o-linear-gradient(30deg, #ace, #f96);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黒之染开发日记

【easeljs】矢量形状 Shape类

一个Shape(形状)允许你在显示列表中显示矢量图。它包含一个带有所有绘制矢量图形的方法的Graphics(图形)实例。Graphics实例可以在多个Shape...

1073
来自专栏我有一个梦想

Python 项目实践二(生成数据)第一篇

上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关...

2789
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(9)---使用公式

Spread的公式计算引擎支持300多种内置函数,并支持通过内置函数和运算符来自定义公式。支持的函数包括日期、时间函数、工程计算函数、财务计算函数、逻辑函数、数...

2205
来自专栏吴老师移动开发

Flutter TextStyle参数解析关于学习

1801
来自专栏程序员的诗和远方

一个比想象中更骚气的圆-svg实现

之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),其实SVG也可以实现类似的效果,而且两者api惊人的相似。 关于SVG SVG是一种矢量...

4007
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

1635
来自专栏前端杂货铺

3d效果的图片轮播

CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换。3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用。     ...

3275
来自专栏知晓程序

开发 | 「小游戏」开发难?不妨先从 2048 入手试试看

最近流行微信「跳一跳」小游戏,我也心血来潮写了一个微信小程序版 2048,本篇文章主要分享实现 2048 的算法以及注意的点,一起来学习吧!

1324
来自专栏编程之旅

iOS开发——Core Graphics绘图

我们在搭建UI界面时,有很多时候,我们会用到iOS自带的绘图功能来完成一些界面的效果,很常用也很方便。今天我们在这里就一起讨论一下iOS的绘图功能。

1982
来自专栏落影的专栏

Metal图像处理——颜色查找表(Color Lookup Table)

一张1024x1024的普通图片,是由1024 * 1024=1048576个像素点组成,每个像素点包括RGBA共32bit,常见的图像处理是对相邻像素点颜色、...

3566

扫码关注云+社区

领取腾讯云代金券