css3 渐变linear-gradient
background: -moz-linear-gradient(top, #FC641C, #FC761C);
参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示:
background: -o-linear-gradient(left,#FC641C, #FC761C);
background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#FC761C), to(#FC641C));
参数:-webkit-gradient 是 webkit 引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop 函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。如图所示:
css3 渐变linear-gradient的更多相关文章
- 14:CSS3 渐变(gradient)与 过度(transition)、CSS3 的2D动画
14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...
- 第161天:CSS3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...
- css3渐变(Gradients)
<html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...
- css3渐变色彩
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial).由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资 ...
- 【转】CSS实现兼容性的渐变背景(gradient)效果
一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css3渐变详解
今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS-3 渐变的使用
CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡. 以前,您必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和 ...
随机推荐
- yii gridview columns value 内容如何换行 & 链接
array( 'header' => '返回的服务器信息', 'name' => 'return_server_info', 'value' => 'str_replace(&quo ...
- Linux系统最小化安装之后的系统基础环境安装以及内核优化脚本
#!/bin/bash #添加epel和rpmforge的外部yum扩展源 cd /usr/local/src wget http://mirrors.ustc.edu.cn/fedora/epel/ ...
- 重学《C#高级编程》(对象与类型)
昨天重看了下<C#高级编程>里面的对象与类型一章,发现自己有许多遗漏没懂的地方重新弄清楚明白了 先说说什么是对象吧,我个人的感觉是:在编程的世界里,一段程序就是一个事物的处理逻辑,而对象就 ...
- <customErrors>节点说明1
<customErrors>节点用于定义一些自定义错误信息的信息.此节点有Mode和defaultRedirect两个属性, 其中defaultRedirect属性是一个可选属性,表示应用 ...
- Win7启动修复MBR(Win7+Linux删除Linux后进入grub rescue的情况)
事因:我的笔记本原先同时安装了Win7+Linux,昨天发现硬盘实在不够用(才60G,虽然还有个500G的移动硬盘),就想把里面的Ubuntu格了.都是用虚拟机做测试的多.后来就格了Ubuntu所在的 ...
- Qt5中QMessageBox::warning()的第一个参数写this时出错
StandardButton QMessageBox::warning ( QWidget * parent, const QString & title, const QString &am ...
- 2013中国大数据技术大会——BDTC2013
阿里飞天平台总架构师唐洪分享了飞天开放平台. 飞天平台特点:同时支持在线和离线应用:安全控制:分布式部署,监控和诊断:无单点故障,可用性99.9%:数据3副本,数据可靠性“10个9”. 阿里飞天平台总 ...
- 自己寫的 Loading JS插件
本文為原創文章,轉載請注明出處,謝謝./** * @author samkin.yang * @version 1.0 */var $_yxj = new SamkinLoading(); (func ...
- php知识点总结(待续)
function_exist()如果没有函数,返回空. is_string($str) 如果$str是布尔型的值,返回为空.是返回1,错误返回空is_array() 同上 字符串输出时,加逗号就自动空 ...
- The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server. (关于jdbc)
The last packet sent successfully to the server was milliseconds ago. The driver has not received an ...