CSS gradient渐变之webkit核心浏览器下的使用
来源:互联网 发布:centos 6.5 64位安装 编辑:程序博客网 时间:2024/06/06 08:52
原文:http://www.cnblogs.com/wqj0405/archive/2010/09/30/1839232.html
by zhangxinxu from http://www.zhangxinxu.com 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现,可以用来代替图片URL。在webkit核心浏览器下(Safari4+, Chrome),有两种类型的渐变,线性的和径向的。您还可以指定多个中间过渡色,此称之为color stops. webkit核心浏览器下的的基本语法如下: 参数 关于参数的具体说明 1. start_point和end_point start_point(x1,x2),end_point(x2,y2),这里的x,y对应左上角为起点的坐标,此处的x,y参数表示与CSS中 的background-position是一致的,可以使像素值,或是百分比值或是left,top,right,bottom。 2. stop 我们会见到类似下面的代码片段, 这里展示的是最简单的线性渐变,由蓝色至白色的渐变。代码如下: 参见上面的background属性值,可以得到webkit核心浏览器下线性渐变的基本语法,如下: 上面示例代码实现的效果如下截图: 径向渐变也可以称为放射状渐变,常用来形成环状效果,晕状效果等。如下示例代码: 结果如下图,截自Safari浏览器: 即使用color-stop方法创建色标点。含有两个参数,第一个参数表示渐变点的在整个渐变范围内的位置,以小数表示;第二个参数为颜色,可以使用RGBA的形式表示,这样可以指定颜色的透明度。 使用color-stop指定过渡点或称为色标点时,渐变的开始(from())以及结束(to())颜色都是可以省略的。您可以参见下面的实例,第一个有from()以及end()的渐变,第二个没有from()以及stop()。 1. 使用from()以及to()方法 上面代码结果如下: 2. 不指定起始颜色与结束颜色 结果如下,截自Safari 4浏览器: 3. 多个过渡点在同一位置 结果类似下面截图: CSS3中有个background-size属性,可以改变背景图片的大小,配合背景渐变属性可以实现重复的背景渐变,如下代码: 结果如下图: 参考文章 如果您发现文章中有表述不准确或是有相关问题需要交流可以通过评论或是去这里进行提问交流。CSS gradient渐变之webkit核心浏览器下的使用
本文地址:http://www.zhangxinxu.com/wordpress/?p=734一、关于渐变
二、基本语法
-webkit-gradient(type, start_point, end_point, / stop...) -webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
参数类型 简要说明 type渐变的类型,可以是线性渐变(linear)或是径向渐变(radial)start_point渐变图像中渐变的起始点end_point渐变图像中渐变的结束点stopcolor-stop()方法,指定渐变进程中特定的颜色inner_center内部中心点,径向渐变起始圆环inner_radius内部半径,径向渐变起始圆outer_center外部渐变结束圆的中心点outer_radius外部渐变结束圆的半径
如果您对photoshop或是flash之类的设计软件的渐变功能熟悉,那么理解渐变 的一些概念或是参数相对就容易些。例如,我们再photoshop中划一条渐变线,会有起始点和结束点,这个起始点和结束点就对应这里的 start_point和end_point参数,如下图:
当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;
当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;
当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;
color-stop()我的理解就是过渡点,这些过渡点有两个参数,一个是点的位置,另外一个是过渡点的颜色。这些参数的示意也可以在photoshop之类的软件渐变编辑器中找到对应的位置。color-stop(0.5, #ff0000)
所表示的意思是在渐变过渡进程的中心位置(50%的位置)有个颜色为#ff0000(红色)的过渡色。三、创建线性渐变
.linear{width:130px; height:130px; border:1px solid green; padding:10px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)); -webkit-background-origin:padding; -webkit-background-clip:content;} <div class="linear"></div>
-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值), [color-stop(位置偏移-小数,停靠颜色值),...],to(结束颜色值));
四、创建径向渐变
.radial{ display:block; width:150px; height:150px; border:1px solid blue; background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); } <div class="radial"></div>
五、指定过渡颜色点
body { background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, orange), to(#ff0000)); }
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, #ff0000));
width:200px; height:120px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
六、创建背景重复渐变
width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;
1. Safari CSS Visual Effects Guide
2. webkit 内核浏览器的Linear Gradients (线性渐变)
3. CSS Property Functions
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=734
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- CSS gradient渐变之webkit核心浏览器下的使用
- css渐变 -moz-linear-gradient -webkit-gradient
- CSS渐变之CSS3 gradient在Firefox3.6下的使用
- css中background:-webkit-gradient实现背景渐变效果,并且兼容各个浏览器
- CSS渐变之CSS3 gradient
- css渐变之linear-gradient
- css渐变之radial-gradient
- 以Webkit为核心的浏览器的CSS样式-----Mask
- CSS属性之渐变属性(gradient)
- css 颜色渐变 Gradient
- CSS 针对谷歌浏览器(Chrome) safari的webkit核心浏览器CSS hack
- background:-webkit-gradient()背景渐变属性
- -webkit-linear-gradient 线性渐变学习
- javascript 里的 body onLoad调用多个方法
- 谁吃了你的硬盘空间?(1) 诡异的df算法
- Android平台上无线网卡自动扫描并关联AP的实现
- Hello World
- ...
- CSS gradient渐变之webkit核心浏览器下的使用
- 基于FileMaker实现的水产行业信息化管理(二)
- Log4Net使用指南
- C++资源导引
- 对参数使用某种表示输入,修改,输出的命名规则
- Android 计时器
- 关于Log4net在webservice中的使用
- Linux系统修改防火墙配置
- POJ 3624 0-1背包问题 动态规划