[文章来源：http://www.cnblogs.com/gaoxue/articles/CSS3Gradient-1.html]
因方便在firefox中测试，根据原文简单总结一下Mozilla内核的线性渐变用法(径向渐变暂时忽略)，其他内核浏览器的渐变（webkit-old,webkit-new,opera,Trident）用法都差不多，请参考原文.
在Mozilla内核中使用 -moz-linear-gradient 属性来完成渐变效果,-moz-linear-gradient 属性 需要 3个参数：
渐变方向 ｜ 起始颜色 ｜ 终止颜色(可以指定多种颜色)
关于 渐变方向 的示例如下：
<!DOCTYPE html>
<html>
<head>
<style>
div{
color : #305999;
width : 380px;
height : 80px;
line-height : 80px;
font-weight : bold;
text-align : center;
margin : 5px auto;
}
.g1 {
background : -moz-linear-gradient(left, #ace,#f96);
}
.g2 {
background : -moz-linear-gradient(top, #ace,#f96);
}
.g3 {
background : -moz-linear-gradient(top left, #ace,#f96);
}
.g4 {
background : -moz-linear-gradient(top right, #ace,#f96);
}
.g5 {
background : -moz-linear-gradient(0deg, #ace,#f96);
}
.g6 {
background : -moz-linear-gradient(90deg, #ace,#f96);
}
.g7 {
background : -moz-linear-gradient(180deg, #ace,#f96);
}
.g8 {
background : -moz-linear-gradient(270deg, #ace,#f96);
}
</style>
</head>
<body>
<div class="g1">left</div>
<div class="g2">top</div>
<div class="g3">top left</div>
<div class="g4">top right</div>
<div class="g5">0deg</div>
<div class="g6">90deg</div>
<div class="g7">180deg</div>
<div class="g8">270deg</div>
</body>
</html>
关于多颜色渐变 的示例如下：
<!DOCTYPE html>
<html>
<head>
<style>
div{
color : #305999;
width : 380px;
height : 80px;
line-height : 80px;
font-weight : bold;
text-align : center;
margin : 5px auto;
}
.g1 {
background : -moz-linear-gradient(left, red, blue, red, blue, red);
}
</style>
</head>
<body>
<div class="g1">left</div>
</body>
</html>
每个渐变颜色值都可以指定一个"停止点"(百分比/像素)，指定渐变过程中纯色的位置(未指定则各颜色均匀分布)：
<!DOCTYPE html>
<html>
<head>
<style>
div{
color : #305999;
width : 380px;
height : 80px;
line-height : 80px;
font-weight : bold;
text-align : center;
margin : 5px auto;
}
.g1 {
background : -moz-linear-gradient(left, red, blue 5%, red, blue 95%, red);
}
</style>
</head>
<body>
<div class="g1">left</div>
</body>
</html>
透明 + 透明 + 背景图片：
[注意：在只设置一个background时，背景图片是在背景颜色之上的，也就是说背景图片会覆盖背景颜色；而下面的示例是设置了两个background层，第一层是透明渐变的颜色，第二层是一张图片，而且由于background属性中后载入的图像（或者说背景层）在先载入的背景层的下面，该示例相当于在背景图像上覆盖了一层透明渐变色的层]
<!DOCTYPE html>
<html>
<head>
<style>
div{
width : 700px;
height : 400px;
}
.g1 {
background:-moz-linear-gradient(right, rgba(255,255,255,0.1), rgba(255,255,255,1)) ,url(gradient-img.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="g1"></div>
</body>
</html>
相关推荐
CSS3中线性渐变的使用总结 在当今Web开发中，CSS3提供了一系列的视觉效果工具，其中包括了渐变效果的实现。渐变效果广泛应用于按钮、背景及其他视觉元素中，以往这些效果需要通过图片来实现，但现在通过CSS3中的渐变...
总结来说，这个"css-gradient_脚本实例_"展示了如何使用jQuery结合CSS渐变来增强网页交互体验。通过动态改变元素的`background-image`属性，我们可以实现各种动态效果，比如在链接悬停时展示渐变背景。这种技术在...
在CSS3中，我们可以使用`linear-gradient()`函数来定义渐变。基本语法如下： ```css background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ``` 这里的`direction`参数指定了渐变的方向...
使用ie-css3.htc的方法很简单，只需要在CSS样式表中将ie-css3.htc文件作为行为（behavior）属性关联到需要CSS3效果的元素： ```css selector { behavior: url(/path/to/ie-css3.htc); /* 其他CSS3属性，如border-...
CSS3文字特效主要依赖于其新增的属性和功能，如文本阴影(text-shadow)、文本描边(text-stroke)、渐变(gradient)、变换(transform)等。通过这些特性，我们可以创造出丰富多彩的文字展示效果，提升网页的视觉吸引力。 ...
2. **边框与背景**：CSS3允许使用圆角边框（`border-radius`）、渐变背景（`linear-gradient`、`radial-gradient`）以及盒阴影（`box-shadow`），使得登录表单可以设计得更加立体和美观。 3. **动画与过渡**：通过`...
3. **边框与背景**：CSS3允许边框使用圆角（border-radius）、渐变（linear-gradient和radial-gradient）、阴影（box-shadow）等效果，使元素外观更加丰富。同时，背景可以设置为多层，每层可以有不同的图像、重复...
《CSS3样例大全》是针对前端开发人员的一份宝贵资源，它包含了各种最新的CSS3技术的实践示例。这份压缩包文件不仅是书本的补充材料，也是一份与时俱进的在线学习工具，让开发者能够深入理解和掌握CSS3的最新特性。 ...
在本文中，我们将深入探讨如何使用CSS3技术创建一个炫酷的登录页面。CSS3是层叠样式表的最新版本，它引入了许多新的特性和功能，使得网页设计变得更加丰富多彩和动态。 首先，让我们理解CSS3的基本概念。CSS3不仅...
2. **边框与背景**：CSS3允许使用圆角边框(border-radius)，线性渐变(gradient)和径向渐变，以及盒阴影(box-shadow)和文字阴影(text-shadow)，提升了视觉效果。 3. **多列布局**：column-count、column-gap和column...
4. **边框与背景**：CSS3允许使用圆角（`border-radius`）、阴影（`box-shadow`）和渐变（linear-gradient, radial-gradient）等效果，使得元素外观更加丰富和立体。 5. **过渡与动画**：`transition`和`animation`...
CSS3的多列布局特性使得创建类似报纸的多栏布局变得简单，如`column-count`、`column-gap`、`column-fill`等属性，让网页设计更加灵活。 scss3_ch5_code.zip是第五章的代码示例，主要讨论了CSS3的边框和背景。包括...
用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序类一起使用。 该插件基于 。 看看它的实际效果： : 要求 此插件需要 Tailwind CSS 1.2 或更高版本。 建议使用新的 2.x 版本。 安装 npm install ...
CSS3允许使用多边框、圆角边框和梯度背景。例如，`border-radius`属性可以创建圆角，`box-shadow`则可添加阴影效果，而`linear-gradient`和`radial-gradient`则可以创建丰富的渐变背景。 **三、布局模式** CSS3...
总结来说，`linear-gradient`在CSS3中提供了丰富的背景颜色渐变可能性，无论是简单的色彩过渡，还是复杂的视觉效果，都可以通过巧妙地配置角度和颜色停止点来实现。开发者可以根据自己的需求和创意，灵活运用`linear...
**CSS3网络查询使用手册** CSS3（Cascading Style Sheets Level 3）是Web设计领域中的一个关键标准，用于定义网页的外观和布局。它提供了丰富的选择器、动画、过渡效果以及新的布局模型，极大地扩展了其前身CSS2.1...
CSS3文字动画不仅限于Splitting库，还可以与其他CSS3技术结合使用，如过渡（transition）、阴影（box-shadow）、渐变（gradient）等，创造出更多独特和创新的效果。同时，这些动画也可以与其他JavaScript库（如...
本文将深入探讨如何使用纯CSS3来创建一个功能完备且美观的进度条，适合初学者学习和使用。 首先，让我们理解CSS3（层叠样式表第三版）的核心特性。CSS3是CSS的最新版本，它引入了许多新特性，如选择器、边框与背景...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是线性渐变（Linear Gradient）。本教程将详细讲解如何利用CSS3创建10种不同颜色的线性渐变按钮，以实现美观且动态的Web Buttons...
- **复合悬停效果**：结合多种CSS3特性，如变形（transform）、渐变（gradient）等，制作出更加复杂的效果。 - **性能优化**：讨论如何在不影响页面加载速度的情况下优化悬停效果。 #### 变形消息 第四章...