CSS3的线性渐变(linear-gradient)

简介:

以webkit内核浏览器为例,

语法:

div{
    width:200px;
    height:200px; 
    background:-webkit-linear-gradient(left,#F39,#09C);
}

如图:

参数:

-webkit-linear-gradient 是 webkit 引擎对渐变的实现参数。第一个参数控制渐变方向,比如 left (由左向右)right(由右向左)。第二个和第三个参数,分别是颜色起止颜色

起止颜色是沿着渐变线,将会在指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置,0%代表起点和100%是终点,但区域外的值可以被用来达到预期的效果。 这也是通过CSS3 Gradient制作渐变的一个关键所在,其直接影响了你的设计效果,像我们这里的示例都不是完美的效果,只是为了能给大家展示一个渐变的效果,大家就这样先用着吧。我们接着看一下不同的起址色的示例:

div{
    width:200px;
    height:200px; 
    background:-webkit-linear-gradient(left,#F39 90%,#09C);
}

如图下

更详情的用法欢迎大家一起来讨论,



本文转自 sshpp 51CTO博客,原文链接:http://blog.51cto.com/12902932/1927036,如需转载请自行联系原作者

相关文章
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
前端开发 UED
CSS3:linear-gradient&input&inset&table
本文介绍了 CSS 中的 `linear-gradient` 渐变、`input` 样式、`inset` 简写属性、`border-collapse: collapse` 表格边框合并以及 `<label>` 元素的 `for` 属性。通过示例代码和解释,帮助读者理解这些 CSS 特性及其应用。
181 13
|
前端开发 程序员
CSS重复线性渐变之画格子
CSS重复线性渐变之画格子
192 0
CSS 03 线性渐变、径向渐变与重复性渐变
linear-gradient( [ || ,]? , [,]* ) < angle >:用角度指定渐变方向或者角度 to left to right to top to bottom <div class='ceng'> </div> .ceng{ width:260px; height:200px; border:1px solid black; background-image:linear-gradient(orange,green); /*从橘红色向绿色渐变,从上到下*/ background-image:linear-g
|
前端开发 JavaScript 程序员
基于H5+css+JavaScript实现动态线性渐变背景
基于H5+css+JavaScript实现动态线性渐变背景
345 0
基于H5+css+JavaScript实现动态线性渐变背景
|
前端开发
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
243 0
线性渐变背景 CSS linear-gradient() 函数 background-image: linear-gradient()
|
前端开发
CSS:linear-gradient()背景颜色线性渐变
CSS:linear-gradient()背景颜色线性渐变
CSS3线性渐变
今天来谈谈CSS3中的线性渐变,有了这个,好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。 首先看看今天的主角: linear-gradient()。
1143 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    249
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    233
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    182
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    139
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    293
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    419
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    181
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    123
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    196
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    270