css3径向渐变详解-遁地龙卷风
(-1)写在前面
我用的是chrome49,如果你用的不是。可以尝试换下浏览器前缀。IE在这方面的实现又特例独行了。不想提及…,这篇是为后续做准备。
(0)快速使用
background-image:-webkit-linear-gradient(red,blue);
或者
background-image: -webkit-gradient(linear,center top,center bottom,from(#ace),to(#f96));
(1)环境准备
#lol
{
width:300px;
height:400px;
border:1px solid black;
background-repeat:no-repeat;
}
<body>
<div id="lol"></div>
</body>
(2)-webkit-linear-gradient
a.参数详解
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) ,这里有正则表达式的东西
[<point> || <angle>,]?是指[<point> || <angle>,]出现0个或1个,<point> || <angle>是指要么是<point> 要么是<angle>,综合在一起就是,要么出现<point>,要么出现<angle>,要么都不出现。
<stop>, <stop>是指必须要出现的。
[, <stop>]*是指出现0个或任意多个, <stop>
<point>为单个值时,有top、left、right、bottom,默认是top,当其为top时,就是从上到下的渐变,为left就是,从左到右的渐变,其余不一一列举
background-image:-webkit-linear-gradient(left,red,blue);
<point>为两个值时,第一参数有top、bottom,第二个参数是left、right,指定的是起点,如果为top left,即左上角,则它的终点是bottom right,即右下角。其余不一一列举
background-image:-webkit-linear-gradient(top left,red,blue);
<angle>指的是角度,background-image:-webkit-linear-gradient(45deg,red,blue),如图所示:
<stop>必须有两个分别是起点和终点,
简单写法是只写颜色background-image:-webkit-linear-gradient(red,blue);等同于复杂写法background-image:-webkit-linear-gradient(red 0%,blue 100%),当然你可以指定非%的单位
第二个参数是指在什么地方插入颜色,全部不写的话可以这样算,不算起点和终点还剩x个点,x点将整个区域分x+1段,那么每段占100/(x+1), background-image:-webkit-linear-gradient(red,orange,blue),每段占50%,所以等同于background-image:-webkit-linear-gradient(red 0%,orange 50%,blue 100%)。不是全部不写和这个类似。
(3) -webkit-gradient
a.详细解释
-webkit-gradient(<type>,<startPoint>,<endPoint>,<startColor>[,<color-stop>]*,<endColor>)
<type>指的是渐变类型,有linear和radial两种
<startPoint>指定起始点,需指定两个值,分别是水平,和垂直,水平有right(0%)、center(50%)、right(100%)、数值,垂直有top、center、bottom、数值。是基于div的长度和高度的。
<endPoint>指定终点,需指定两个值,分别是水平,和垂直,水平有left(0%)、center(50%)、right(100%)、数值,垂直有top、center、bottom、数值。是基于div的长度和高度的。
<startColor>指定起始颜色,列如:from(red),
[,<color-stop>]*,是指0个或多个,<color-stop>,<color-stop>写为color-stop(0.5,red),分别是位置和颜色
<endColor>指的终点颜色,列如:to(#f96)
background:-webkit-gradient(linear,center top,center bottom,from(#ace),color-stop(0.5,red),to(#f96));
相当于 background:-webkit-linear-gradient(top,#ace,red,#f96);
css3径向渐变详解-遁地龙卷风相关推荐
- canvas径向渐变详解
创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...
- CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法 总结 1.线性渐变 1.1.什么是线性渐变 线性渐变,顾名思义就是 ...
- CSS3各个模块详解
一, CSS3 盒子 阴影 属性 box- shadow 也是 CSS3 新增 的 一个 重要 属性, 用来 定义 元素 的 盒子 阴影. inset: 阴影 类型, 可选 值. 如果不 设置, 其 ...
- CSS3技巧:利用css3径向渐变做一张优惠券(转)
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
- html css径向渐变,如何实现css3径向渐变如何定义中心和大小形状
如何实现css3径向渐变如何定义中心和大小形状 发布时间:2020-07-13 16:23:57 来源:亿速云 阅读:249 作者:Leah 如何实现css3径向渐变如何定义中心和大小形状?很多新手对 ...
- php开源混合模式吗,CSS3混合模式使用详解
这次给大家带来CSS3混合模式使用详解,使用CSS3混合模式的注意事项有哪些,下面就是实战案例,一起来看一下. 一.关于混合模式 熟悉PS的人都应该知道混合模式: SVG以及Canvas中也有混合模式 ...
- CSS3动画特效详解
大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...
- CSS3新特性详解(三):CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
- 视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
- html旋转角度计算,CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园...
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园 2018-09-26 在CSS3中,可以利用transfor ...
最新文章
- python opencv 批量将视频转化为图片
- 把tomcat默认的8080段口改成80端口
- el-table数据不显示_数据透视表,一篇就够了
- 新概念英语第三册01-20课(转)
- 真正的轻量级WebService框架——使用JAX-WS(JWS)发布WebService
- 关于阿里矢量图标的三种使用方法
- FastFDS 分布式文件系统
- 有声小说php源码,PHP魅雅有声小说联盟程序源码 v7.7.2
- Notepad++的列编辑模式_小技巧
- python微分几何_十一年磨一剑:中科大数学教授成功证明微分几何学两大猜想
- mysql ibd文件清理_MYSQL .ibd文件数据恢复
- python虚拟环境是什么意思_python的虚拟环境详解
- 运动生理学:同骨骼肌相比,心肌细胞的收缩特点是什么?
- 西部数码 php 伪静态,西部数码虚拟主机伪静态如何设置
- Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1;
- 产品读书《金字塔原理》
- es文件管理器 web服务器,强烈推荐:云盘 = ES文件浏览器app “ + ”穿越派软件
- 一道100个飞机乘客随机坐座位的趣味概率问题
- VMWARE下的Ubuntu清理磁盘
- 使用鱼骨图构建AS-IS和TO-BE - 过程改进和讨论
热门文章
- php中dump是什么文件怎么打开,Win8/Win10 dump文件怎么打开?dump文件分析工具下载及使用教程...
- html模仿抖音,仿抖音示例
- 一文入门推荐系统——推荐系统实践读书笔记
- 根据Java源码生成流程图
- 渗透测试各种扫描工具集合(好用)
- 基于大数据的图书推荐系统
- Java server sent_Server-Sent Events的Java简单实现
- 坦克大战的Lua实现
- Java分布式面试题( Session分布式解决方案)
- python批量查询ip归属地_IP地址地理信息批量查询小工具