/* 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, #f...
Gradients are image data-type CSS elements representing a transition between two or more colors. As with every gradient, there are no inherent dimensions to a linear gradient; i.e., there is no normal or desired size nor a recommended ratio. The concrete size matches the size of the element...
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>.
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等)、WebKit(Safari、Chrome等)、Opera(Opera浏览器)、Trident(讨厌的IE浏览...
CSS linear-gradient() 函数 CSS 函数 实例 以下实例演示了从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色: [mycode3 type='css'] #grad { background-image: linear-gradient(red, yellow, blue); } [/mycode3] 尝试一下 » 定义与用法 linear-gradi
参数:-webkit-gradient 是 webkit 引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是 linear(线性渐变)或者 radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和 left bottom(左下角)...
通常,如果给一个DOM元素的background-image使用linear-gradient,那么其(渐变)显示区域就是元素的border-box区域(如果不了解元素的border-box区域,建议先阅读box-sizing相关的文档)。其实也是background-color或者说通过url引入背景图像的显示区域。 然而,如果你通过CSS的background-size设置一个尺寸,比如说200px * 200px...
1. Horizontal Gradient : .element { background: linear-gradient(to right, #FFC371, #FF5F6D); } 上例创建了一个从'#FFC371'水平转换为'#FF5F6D'的 Linear Gradient 。上面线性函数声明中的代码将导致下面显示的渐变: 2. Vertical Gradient: .element { height:885px; background: linear-gradient(...
background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 线性渐变 - 从上到下(默认) 下面的例子显示了从顶部开始的线性渐变。它从红色开始,过渡到黄色: 从上到下(默认) 代码如下: <!DOCTYPE html> #grad1 { height: 200px; background-color: red; /* 针对不支持渐变的...
linear-gradient()属性把背景设置为多组颜色的渐变背景,同时利用background-size属性将这个背景放大,这样的话虽然背景有很多种颜色,但是经过了放大,超出盒子部分的将被隐藏,肉眼看的话,只能看到一种或者两种颜色。 然后就是借助于动画,让背景动起来,形成可以变化的渐变背景: ...