css3整理--gradient
gradient语法:
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) // chrome的新版写法和FF的一致,只要改版前缀即可
第一个参数:指定渐变方向。例如:top,从上向下渐变;left,从左向右渐变; left top,从左上向右下渐变
第二个参数:指定起始点的颜色值
第三个参数:指定结束点的颜色值
还可以加参数,如:
background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
可以指定多个颜色值,如果不同时指定百分比,则平均分配位置,否则,通过指定某个颜色值渐变到百分之多少的位置。
还可以指定角度:
background: -moz-linear-gradient(left 30deg, #ace, #f96);
如果设置left,不设置角度,则为从左到右渐变;
如果设置left,同时设置90deg,则为从上到下渐变;
background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);(径向渐变)
第一个参数指定位置:bottom left指从左下角开始渐变
第二个参数指定渐变的形状:ellipse指椭圆形渐变
第三到第六个参数指定渐变的颜色,同样可以指定百分比
css3整理--gradient的更多相关文章
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- css3整理-方便查询使用
最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性bor ...
- css3之gradient
radial-gradient The CSS radial-gradient() function creates an <image> which represents a gradi ...
- css3整理--filter
只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filt ...
- css3整理--clip
clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fi ...
- css3整理--::selection
::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Fi ...
- css3整理--calc()
calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的widt ...
- css3整理--media
media语法: <link rel="stylesheet" media="screen and (max-width: 600px)" href=&q ...
- css3整理--box-sizing
box-sizing语法: box-sizing : content-box || border-box || inherit 参数取值: content-box:此值为其默认值,其让元素维持W3C的 ...
随机推荐
- 某软件大赛C#版考题整理——【单选题】
多选题:http://www.cnblogs.com/zxlovenet/p/3525849.html 编程题:http://www.cnblogs.com/zxlovenet/p/3525854.h ...
- win10 .net framework 3.5无法安装错误代码0x800F081F
复制链接:http://download.windowsupdate.com/d/msdownload/update/software/updt/2015/11/microsoft-windows-n ...
- http 断点续传
一.序 Hi,大家好,我是承香墨影! HTTP 协议在网络知识中占据了重要的地位,HTTP 协议最基础的就是请求和响应的报文,而报文又是由报文头(Header)和实体组成.大多数 HTTP 协议的使用 ...
- scala实现相邻两个元素挑换位置的代码,哈哈
import scala.math._ import breeze.plot._ import breeze.linalg._ import scala.collection.mutable.Arra ...
- html实体转换
摘要: 在 HTML 中,某些字符是预留的.在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签.如果希望正确地显示预留字符,我们必须在 HTML 源代码中 ...
- Batch Normalization 学习笔记
原文:http://blog.csdn.net/happynear/article/details/44238541 今年过年之前,MSRA和Google相继在ImagenNet图像识别数据集上报告他 ...
- Java实现文件批量重命名
Windows操作系统可以实现重命名文件操作,却不能实现批量重命名.本实例实现了批量重命名功能,可以将一个文件夹内同一类型的文件按照一定的规则批量重命名.用户可以给出重命名模板,程序可以根据模板对相应 ...
- spring mvc处理方法返回方式
Model: package org.springframework.ui; import java.util.Collection; import java.util.Map; public int ...
- java中的编码和编码格式问题
看来问的人和回答的人都不一定清楚什么是“编码和编码格式”,以及如何理解“java中字符串的编码”;首先明确几点: unicode是一种“编码”,所谓编码就是一个编号(数字)到字符的一种映射关系,就仅仅 ...
- systemctl命令完全指南
Systemctl是一个systemd工具,主要负责控制systemd系统和服务管理器. Systemd是一个系统管理守护进程.工具和库的集合,用于取代System V初始进程.Systemd的功能是 ...