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的 ...
随机推荐
- js 1+'2' == '1'+'2'
前言 非常深入地讲解了包含隐式转换时js计算过程,全篇干货.本文由@keenjaan授权分享. 本文由@仙人掌推荐分享 正文从这里开始 你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎 ...
- GridView动态添加列并判断绑定数据DataTable的列类型控制展示内容
此篇随笔是2013年根据项目需求开发记录的,不一定符合大众口味,只需了解开发思路,毕竟解决方案多种多样. 下面简单说说需求点吧: (1)通过下拉列表可以选择一个DataSet(数据集),一个DataS ...
- What's new in JDK 8
(1)http://docs.oracle.com/javase/8/docs/technotes/guides/language/enhancements.html#javase8 (2)https ...
- Ubuntu中的“资源管理器”System Monitor
我们在Windows中经常要查看“资源管理器”来了解系统运行情况,对进程进行操作等等... 在Windows桌面任务栏右键“启动任务管理器”: 学习Linux,自然也希望有类似的“资源管理器”,安装完 ...
- QT编译错误: multiple definition of `qMain(int, char**)'
QT使用过程中来回添加修改代码,结果出现了编译错误:error: multiple definition of `qMain(int, char**)' 一直看我的源文件是都哪里有错误,最后发现是在p ...
- Bootstrap 各种进度条详解
一:默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class . ...
- python 数据类型-字符串-对象和方法
python的字符串有众多方法,可以在doc文档中查看 示例 转换开头字母为大写 c1="welcome to my python" >>> c1.capital ...
- springboot+swagger2案例
1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...
- bash脚本 while语法
基本语法(比较常见的两种形式): 只要特定条件为真,”while” 语句就会执行 while [ condition ] do command1 command2 command3 done 或者 w ...
- ios的AutoresizingMask【转】
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. enum { UIViewAutoresi ...