[转]ebkit内核浏览器的Linear Gradients (线性渐变)
转自:http://www.css88.com/archives/tag/webkit-gradient
- webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),…] );
- -webkit-gradient是background的一个属性值;
- webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear;
- 第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);
- 当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(颜色值) ”;
- 实现垂直渐变和水平渐变渐变时,x1和x2可以最简单的取值是left(或0%)或right(或100%),y1和y2可以最简单的取值是top(或0%)或bottom(或100%);
- from(开始颜色值),to(结束颜色值)是两个渐变颜色值;
- [color-stop(偏移量<小数>,停靠颜色值),…]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为小数,如果偏移量>=1,那么该color-stop相当于无效;
- firefox下的Linear Gradients (线性渐变) 请参阅:
- ie下可以使用渐变滤镜,请参阅: http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx
[转]ebkit内核浏览器的Linear Gradients (线性渐变)的更多相关文章
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
- CSS3 线性渐变linear-gradient
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...
- CSS3 线性渐变(linear-gradient)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
- 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- CSS3 线性渐变(linear-gradient) 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- CSS3线性渐变linear-gradient
转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...
- CSS3之线性渐变(linear gradients)
线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变. 语法: background:linear-gradient(direction,color-stop ...
随机推荐
- session 登陆浏览,并实现session注销登陆
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Sencha Toucha之Ext.Ajax
Ext.Ajax是Ext.data.Connection的hi一个单实例,不需要使用new或者Ext.create方法创建实例后再使用. 类的继承关系为: Ext.Base Ext.data.Conn ...
- 08.安装Oracle 10g和SQLServer2008(仅作学习使用VirtualBox虚拟机来安装节省电脑资源)
1.虚拟机和宿主机共享文件夹. 2.右ctrl+F切换VirtualBox全屏 3.安装Oracle 10g 4.输入密码:root------------>下一步 5.勾选网络配置" ...
- XML详解:第一部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [C程序设计语言]第四部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- HDU 3549 Flow Problem(最大流)
HDU 3549 Flow Problem(最大流) Time Limit: 5000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/ ...
- 51nod 1413 权势二进制 背包dp
1413 权势二进制 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 一个十进制整数被叫做权势二进制,当他的十进制表示的时候只由0或1组成.例如0,1,101, ...
- [转]产品需求文档(PRD)的写作
产品需求对产品研发而言非常重要,写不好需求,后面的一切工作流程与活动都会受到影响.转载一篇文章,关于产品需求文档写作方面的,如下: 本文摘自(一个挺棒的医学方面专家):http://www.cnblo ...
- Java的内存分配策略
简单来说,对象内存分配主要是在堆中分配.但是分配的规则并不是固定的,取决于使用的收集器组合以及JVM内存相关参数的设定 以下介绍几条基本规则(使用的ParNew+Serial Old收集器组合): 一 ...
- Android:控件WebView显示网页
WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient setWebClient:主要 ...