CSS3 线性渐变(linear-gradient)奇效详解 - HTML/CSS当前位置:& &&&CSS3 线性渐变(linear-gradient)奇效详解CSS3 线性渐变(linear-gradient)奇效详解&&网友分享于：&&浏览：0次CSS3 线性渐变(linear-gradient)特效详解在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写 &CSS 代码就可以实现。现在的CSS3线性渐变(linear-gradient)技术也可以实现这样的效果喽！
CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。
本文主要看看在 Mozilla、Webkit、Opera 下的应用，当然在IE下也可以实现，他需要通过IE特有的滤镜来实现，在后面会列出滤镜的使用语法，但不会具体介绍如何实用，感兴趣的可以搜索相关技术文档。
一、线性渐变在 Mozilla 下的应用
-moz-linear-gradient( [&point& || &angle&,]? &stop&, &stop& [, &stop&]* )
参数：其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left &top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
例子：background: -moz-linear-gradient( top,#ccc,#000);
二、线性渐变在 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));
background: -webkit-linear-gradient(top,#ccc,#000);
三、线性渐变在 Opera 下的应用
-o-linear-gradient([&point& || &angle&,]? &stop&, &stop& [, &stop&]); /* Opera 11.10+ */
参数：-o-linear-gradient 有三个参数。第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。（注：Opera 支持的版本有限，本例测试都是在 Opera11.1 版本下，后面不在提示）
例子：background: -o-linear-gradient(top,#ccc, #000);
四、线性渐变在 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 表示水平渐变。
上面我们主要介绍了线性渐变在上述四大核心模块下的实现方法，接着我们主要针对线性渐变在 Mozilla、Webkit、Opera 三大模块下实现各种不同线性渐变实例：
从上面的语法中我们可以很清楚的知道，要创建一个线性渐变，我们需要创建一个起点和一个渐变方向（或角度），定义一个起始色：
-moz-linear-gradient( [&point& || &angle&,]? &stop&, &stop& [, &stop&]* )
-webkit-linear-gradient( [&point& || &angle&,]? &stop&, &stop& [, &stop&]* )
-o-linear-gradient( [&point& || &angle&,]? &stop&, &stop& [, &stop&]* )
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
起始点（Starting Point）的工作方式类似于 background position。您可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。其工作方式主要包含：Top → Bottom、Left → Right、bottom → top、right → left等，接着我们主要一种一种来看其实现的效果：
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、Linear Gradient (with Even Stops):
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), color-stop(0.5, #ace), color-stop(0.75, #f96), to(#ace));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
5、with Specified Arbitrary Stops：
/* Firefox 3.6+ */
&background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
&/* Safari 4-5, Chrome 1-9 */
&background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.05, #f96), color-stop(0.5, #ace), color-stop(0.95, #f96), to(#ace));
&/* Safari 5.1+, Chrome 10+ */
&background: -webkit-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
&/* Opera 11.10+ */
&background: -o-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
&6、角度(Angle)：
正如上面看到的示例，如果您不指定一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，您不妨设置角度试试。例如，下面的两个渐变具有相同的起点left center，但是加上一个30度的角度。
没有角度的示例代码：
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);
当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。我来看看你核心代码：
background: -moz-linear-gradient(&angle&, #ace, #f96);
background: -webkit-gradient(&type&,&angle&, from(#ace), to(#f96));
background: -webkit-linear-gradient(&angle&, #ace, #f96);
background: -o-linear-gradient(&angle&, #ace, #f96);
我们来看看各角度的区别：
& background: -moz-linear-gradient(0deg, #ace, #f96);
& background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
& background: -webkit-linear-gradient(0deg, #ace, #f96);
& background: -o-linear-gradient(0deg, #ace, #f96);
& background: -moz-linear-gradient(45deg, #ace, #f96);
& background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
& background: -webkit-linear-gradient(45deg, #ace, #f96);
& background: -o-linear-gradient(45deg, #ace, #f96);
& background: -moz-linear-gradient(90deg, #ace, #f96);
& background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
& background: -webkit-linear-gradient(90deg, #ace, #f96);
& background: -o-linear-gradient(90deg, #ace, #f96);
& background: -moz-linear-gradient(135deg, #ace, #f96);
& background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
& background: -webkit-linear-gradient(135deg, #ace, #f96);
& background: -o-linear-gradient(135deg, #ace, #f96);
& background: -moz-linear-gradient(180deg, #ace, #f96);
& background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
& background: -webkit-linear-gradient(180deg, #ace, #f96);
& background: -o-linear-gradient(180deg, #ace, #f96);
& background: -moz-linear-gradient(225deg, #ace, #f96);
& background: -webkit-gradient(linear,100% 0%,0 100%,from(#ace),to(#f96));
& background: -webkit-linear-gradient(225deg, #ace, #f96);
& background: -o-linear-gradient(225deg, #ace, #f96);
& background: -moz-linear-gradient(270deg, #ace, #f96);
& background: -webkit-gradient(linear,50% 0%,50% 100%,from(#ace),to(#f96));
& background: -webkit-linear-gradient(270deg, #ace, #f96);
& background: -o-linear-gradient(270deg, #ace, #f96);
& background: -moz-linear-gradient(315deg, #ace, #f96);
& background: -webkit-gradient(linear,0% 0%,100% 100%,from(#ace),to(#f96));
& background: -webkit-linear-gradient(315deg, #ace, #f96);
& background: -o-linear-gradient(315deg, #ace, #f96);
& background: -moz-linear-gradient(360deg, #ace, #f96);
& background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
& background: -webkit-linear-gradient(360deg, #ace, #f96);
& background: -o-linear-gradient(360deg, #ace, #f96);
除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。 这也是通过CSS3 Gradient制作渐变的一个关键所在，其直接影响了你的设计效果，像我们这里的示例都不是完美的效果，只是为了能给大家展示一个渐变的效果，大家就这样先用着吧。我们接着看一下不同的起址色的示例：
background: -moz-linear-gradient(top, #ace, #f96 80%, #f96);
background: -webkit-linear-gradient(top,#ace,#f96 80%,#f96);
background: -o-linear-gradient(top, #ace, #f96 80%, #f96);
如果没有指定位置，颜色会均匀分布。如下面的示例：
background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace);
background: -webkit-linear-gradient(left,red,#f96,yellow,green,#ace);
background: -o-linear-gradient(left, red, #f96, yellow, green, #ace);
7、渐变上应用透明度(Transparency)：
透明渐变对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个白色到透明的线性渐变。我们来看一个官网的示例吧：
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(12.jpg);
background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(12.jpg);
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(12.jpg);
未加渐变效果前：
加渐变效果后：
版权声明：本文为博主原创文章，未经博主允许不得转载。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有SVG 渐变 - 线性
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型：
SVG 线性渐变 - &linearGradient&
&linearGradient&元素用于定义线性渐变。
&linearGradient&标签必须嵌套在&defs&的内部。&defs&标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平，垂直或角渐变：
当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变
定义水平线性渐变从黄色到红色的椭圆形：
下面是SVG代码：
&svg xmlns="http://www.w3.org/2000/svg" version="1.1"&
&linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"&
&stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /&
&stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /&
&/linearGradient&
&ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" /&
对于Opera用户：（右键单击SVG图形预览源）。
代码解析：
&linearGradient&标签的id属性可为渐变定义一个唯一的名称
&linearGradient&标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个&stop&标签来规定。offset属性用来定义渐变的开始和结束位置。
填充属性把 ellipse 元素链接到此渐变
定义一个垂直线性渐变从黄色到红色的椭圆形：
下面是SVG代码：
&svg xmlns="http://www.w3.org/2000/svg" version="1.1"&
&linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"&
&stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /&
&stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /&
&/linearGradient&
&ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /&
对于Opera用户：（右键单击SVG图形预览源）。
定义一个椭圆形，水平线性渐变从黄色到红色并添加一个椭圆内文本：
下面是SVG代码：
&svg xmlns="http://www.w3.org/2000/svg" version="1.1"&
&linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"&
&stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /&
&stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /&
&/linearGradient&
&ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)" /&
&text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86"&
SVG&/text&
对于Opera用户：（右键单击SVG图形预览源）。
代码解析：
&text& 元素是用来添加一个文本
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码SVG Linear Gradient Example
cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv
Pen Settings
HTML Preprocessor
About HTML Preprocessors
HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Jade.
Add Class(es) to &html>
Adding Classes
In CodePen, whatever you write in the HTML editor is what goes within the &body> tags in . So you don't have access to higher-up elements like the &html> tag. If you want to add classes there, that can effect the whole document, this is the place to do it.
Stuff for &head>
About the &head>
In CodePen, whatever you write in the HTML editor is what goes within the &body> tags in . If you need things in the &head> of the document, put that code here.
CSS Preprocessor
About CSS Preprocessors
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
About CSS Base
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices:
and a . Or, chose Neither and nothing will be applied.
Vendor Prefixing
About Vendor Prefixing
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.
We offer two popular choices:
(which processes your CSS server-side) and
(which applies prefixes via a script, client-side).
Autoprefixer
Prefixfree
Add External CSS
These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.
About External Resources
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Quick-add:
Foundation
Animate.css
+ add another resource
JavaScript Preprocessor
About JavaScript Preprocessors
JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
CoffeeScript
LiveScript
TypeScript
Add External JavaScript
These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.
About External Resources
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Quick-add:
GreenSock TweenMax
Handlebars
Polyfill.io
Underscore
+ add another resource
Code Indentation
Width of Indent
Save Automatically?
If active, Pens will autosave every 30 seconds after being saved once.
Auto-Updating Preview
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
&div class=&contain&&
&svg width=&750px& height=&300px& fill=&url(#Gradient-1)&&
&linearGradient id=&Gradient-1& x2=&0%& y2=&100%& gradientUnits=&userSpaceOnUse&&
&stop offset=&10%& stop-color=0afc1& /&
&stop offset=&10%& stop-color=&#b4c63b& /&
&stop offset=&20%& stop-color=&#ef5b2b& /&
&stop offset=&20%& stop-color=񻂡& /&
&stop offset=&30%& stop-color=&#ab6294& /&
&stop offset=&30%& stop-color=cb98f& /&
&stop offset=&40%& stop-color=0afc1& /&
&stop offset=&40%& stop-color=&#b4c63b& /&
&stop offset=&50%& stop-color=&#ef5b2b& /&
&stop offset=&50%& stop-color=񻂡& /&
&stop offset=&60%& stop-color=&#ab6294& /&
&stop offset=&60%& stop-color=cb98f& /&
&stop offset=&70%& stop-color=0afc1& /&
&stop offset=&70%& stop-color=&#b4c63b& /&
&stop offset=&80%& stop-color=&#ef5b2b& /&
&stop offset=&80%& stop-color=񻂡& /&
&stop offset=&90%& stop-color=&#ab6294& /&
&stop offset=&90%& stop-color=cb98f& /&
&stop offset=&100%& stop-color=0afc1& /&
&/linearGradient&
&text x=&15%& y=&75%&&Apple&/text&
&p class=&p&&Demo by Joni Trythall. &a href=&/getting-started-svg-gradients/&&See article&/a&.&/p&
@import url(/css?family=Signika);
/* Basic styling */
background: #f3f3f3;
.contain {
text-align:
font-size: 200
font-weight:
font-family: 'Signika', sans-
text-align:
font-family: Arial, sans-
Asset uploading is a PRO feature.
As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.
..................
Editor Commands
Autocomplete (if available)
Find Previous
Find & Replace
Indent Code Right
Indent Code Left
Tidy Up Code
Line Comment
Block Comment
Join This & Next Line
Pen Actions
Create New Pen
Info Panel (if owned)
HTML Specific
Select Outward Matching Pair
Wrap With...
Close Closest Open Tag
CSS Specific
Evaluate Simple Math
Increment Number 1
Decrement Number 1
Re-run Preview
Clear All Analyze Errors
Open This Dialog
CodePen requires JavaScript to render the code and preview areas in this view.
Trying , which is the preview area without any iframe and does not require JavaScript. Although what the preview is of might!
Need to know how to enable Jav?
Close this, use anyway.
