linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。 创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。 /*从上到下,蓝色渐变到红色*/linear-gradient(blue,red);/*渐变轴为45度,从蓝色渐变到红色*/linear-gradient(45deg...
从蓝色渐变到红色 */linear-gradient(45deg, blue, red);/* 从右下到左上、从蓝色渐变到红色 */linear-gradient(tolefttop, blue, red);/* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */linear-gradient(0deg, blue, green40%, red);...
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的...
background:-moz-linear-gradient(red,yellow,blue);/* Firefox 3.6-15 */ background:linear-gradient(red,yellow,blue);/* 标准语法 */ 示例介绍 下面用10个示例,简单介绍这个属性的用法。 1、background: linear-gradient(to left,#d3959b,#bfe6ba); to left 设置渐变从右到左,相当于270deg。 2、back...
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核, 主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(Opera浏览器)、Trident(讨厌的IE浏览器)。 本文照常忽...
Collection of hand-picked free HTML and CSS linear-gradient code examples from Codepen and other resources.
以下是一个简单的例子,演示了如何在CSS中使用`linear-gradient`函数: ```css /*创建一个从上到下的渐变背景*/ .gradient-example1 { background: linear-gradient(to bottom, #ffcc00, #ff6600); height: 200px; } /*创建一个从左上到右下的渐变背景*/ .gradient-example2 { background: linear-...
background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 线性渐变 - 从上到下(默认) 下面的例子显示了从顶部开始的线性渐变。它从红色开始,过渡到黄色: 从上到下(默认) 代码如下: <!DOCTYPE html> #grad1 { height: 200px; background-color: red; /* 针对不支持渐变的...
Now, we will see some examples of using linear-gradient properties in CSS. Example #1 Code: <!DOCTYPE html> CSS Linear Gradient Example .gradient_class { height: 80px; background-color: green; background-image: linear-gradient(coral...
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.