线性渐变 `-webkit-linear-gradient`
线性渐变 -webkit-linear-gradient
.header-box {background-image: -webkit-linear-gradient(#000, #121212);background-image: linear-gradient(#000, #121212);
}
- 参数:-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。
- **[css3渐变之linear-gradient与-webkit-linear-gradient写法异同]**区别:
background: linear-gradient(direction, color-stop1, color-stop2, …);
通常只需要linear-gradient,兼容性较好。但iphone5的ios6系统下,linear-gradient不识别,需要加上-webkit-linear-gradient。
linear-gradient和-webkit-linear-gradient的用法是有很大区别的,千万别以为只是多了一个-webkit。
主要是第一个参数direction。前者需要使用“to bottom”,而后者是“bottom”,不能加“to”:
.im-item .im-mask {
background:linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
background:-webkit-linear-gradient(bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
}使用角度时也不一样,前者0deg表示从下到上,而后者0deg表示从左到右。如:
background: linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));如果第一个参数省略,那么两者都表示从上到下,这点倒是相同:
background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
线性渐变 `-webkit-linear-gradient`相关推荐
- 16.SVG线性渐变(Linear Gradient)
SVG 渐变 和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变.渐变方式有两种:线性和径向. SVG 线性渐变 - linearGradie ...
- -webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
webkit内核的safari. Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari. Chrome的Linear Gradients (线 ...
- 【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录 一.LinearGradient 线性渐变渲染 1.设置 2 个颜色的渐变 3.设置多个颜色的渐变 二.LinearGradient 线性渐变渲染重要参数分析 1.正常渲染 2.设置多个渐变 ...
- gradient设置上下渐变_css3渐变之线性渐变linear-gradient
线性渐变基本语法: background: linear-gradient(direction, color-stop1, color-stop2, ...); 为了创建一个线性渐变,必须至少定义两种 ...
- 线性渐变(linear-gradient)
线性渐变(linear-gradient) 现行渐变 首先看下示例 (1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gra ...
- 兼容IE与firefox的css 线性渐变(linear-gradient)
IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F90 ...
- html垂直线性渐变,html5线性渐变
来源: http://www.html5china.com/css3/20111124_2894.html 渐变可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3 渐变 线性渐变
线性渐变的一般结构是: 复制代码 代码如下: background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgb ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
最新文章
- Python-socket编程
- 我理解的--java 单例模式
- python 周末大作业之2
- php 在线繁体转换简体,php如何实现简体繁体转换
- IIs管理服务一直启动失败的原因之一
- ip访问 webstorem_常见问题-iOS WebView IP直连 如何处理 Cookie
- TensorFlow生成.mat文件
- 蓝牙广播错误码3_蓝牙简介—物理层(PHY)
- c int转字符串_零基础如何学好Python 之int 数字整型类型 定义int()范围大小转换...
- fiddler中文乱码解决
- python数据清洗入门教程(完整版)
- 大厂字节程序员薪资曝光:排行世界第五厉害了
- 计算机组成RAW相关,计算机组成和系统结构习题解答.ppt
- 【沃顿商学院学习笔记】领导力——Business Impact:03商业如何驱动影响力的案例Some Cases
- BF、KMP、BM、Sunday算法讲解
- 程序员工具大全【持续更新】
- 用Python设计第一个游戏,小插曲之变量和字符串(课堂笔记)
- 脚手架是什么你真知道吗?---kalrry
- 【熵与特征提取】基于“信息熵”的特征指标及其MATLAB代码实现(功率谱熵、奇异谱熵、能量熵)
- 浅谈云上攻防——云服务器攻防矩阵