深入理解css3中的线性渐变
css3中的线性渐变
线性渐变公式:
background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, <color-stop> [, <color-stop>]+ );
意为:(角度deg或者方位词,一个或多个渐变颜色关键结点(多个的话用","隔开));
此种写法跟正则表达式类似:
[ ]:代表一个字符位,一般跟 “|” 连用,表示从[ ]中选择一个;
|:表示“或”,意为从此符号左右两边选择一个。
eg:[1|2],即表示此位不是1就是2;
?:表示可有可无,取值范围为[0,1];
*:表示可有可无,取值范围为(0,+∞);
+:表示至少有一个,取值范围为[1,+∞];
此篇用Chrome浏览器预览,故加上-webkit-前缀(以红黄二色为例)
1.angle是渐变的角度,表示为xxdeg。
1)找到渐变图形的中心点,以此为坐标原点做坐标系。
2)从0deg开始,逆时针旋转形成的夹角角度为正,顺时针旋转形成的夹角角度为负。
3)渐变趋势跟沿着旋转一定角度后形成的射线方向相同。
xx=0 或 xx=360 时,渐变为水平从左向右;
eg:background: -webkit-linear-gradient(0deg,red 0,yellow 200px);
xx=90 时,渐变为垂直从下向上;
eg:background: -webkit-linear-gradient(90deg,red 0,yellow 200px);
xx=180 时,渐变为水平从右向左;
eg:background: -webkit-linear-gradient(180deg,red 0,yellow 200px);
xx=270 时,渐变为垂直从上向下;
eg:background: -webkit-linear-gradient(270deg,red 0,yellow 200px);
图例一:
0<xx<90 时,渐变从左下到右上。
eg:beg:ackground: -webkit-linear-gradient(45deg,red 0,yellow 200px);
90<xx<180 时,渐变从右下到左上。
eg:background: -webkit-linear-gradient(135deg,red 0,yellow 200px);
180<xx<270 时,渐变从右上到左下。
eg:background: -webkit-linear-gradient(225deg,red 0,yellow 200px);
270<xx<360 时,渐变从左上到右下。
eg:background: -webkit-linear-gradient(315deg,red 0,yellow 200px);
图例二:
2.side-or-corner (边或角)
可选值有 top(270deg或-90deg)、 bottom(90deg)、left (0deg)、right(180deg)、left top(315deg或-45deg)、left bottom(45deg)、right top(225deg或-135deg)、right bottom(135deg),用来表示 从上往下、从下往上、从左往右、从右往左、从左上往右下、从左下往右上、从右上往左下、从右下往左上等方位。
3.color-stop(渐变关键颜色结点)
公式:<color> [ <percentage> | <length> ]
意为:颜色值或代表颜色的英文单词+空格+此渐变关键点所在位置在相应图形中所占的百分比或长度值(px);
注:此处一个颜色值<color>只能对应一个位置[ <percentage> | <length> ](百分比是位置在两个颜色关键结点连线的百分比,长度值是位置和原点的距离)。
深入理解css3中的线性渐变的更多相关文章
- CSS3中颜色线性渐变实战
css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- 深入理解css3中nth-child和 nth-of-type的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...
- 深入理解css3中 nth-child 和 nth-of-type 的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...
- 深入理解css3中的flex-grow、flex-shrink、flex-basis
https://www.cnblogs.com/ghfjj/p/6529733.html
- css3 中的渐变
虽说css3 都已经使用多年了,但是关于css3的渐变用的很少.今天遇见了,就学习了一下. 首先我们打开ps,新建一个画布,选择渐变工具,这个时候我们能够看到顶栏上面的渐变类型如下 第一个我们选中的是 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- 深入理解CSS3 gradient斜向线性渐变——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639 一.问题没有想 ...
随机推荐
- Libgdx 1.5.2发布
[1.5.2] - 修复问题 #2433 - 修复LWJGL在Mac OS X的本地载入问题 [1.5.1] - Gradle 升级到 2.2 - Android Gradle 工具升级到 1.0.0 ...
- Android存储系统的架构与设计
一.概述 本文讲述Android存储系统的架构与设计,基于Android 6.0的源码,涉及到最为核心的便是MountService和Vold这两个模块以及之间的交互.为了缩减篇幅,只展示部分核心代码 ...
- TCP/IP滑动窗口
T C P使用一种窗口(w i n d o w)机制来控制数据流.当一个连接建立时,连接的每一端分配一个缓冲区来保存输入的数据,并将缓冲区的尺寸发送给另一端.当数据到达时,接收方发送确认,其中包含了自 ...
- 如何运行 rpcz python example
试着运行 rpcz-python 的 example.过程记录如下.假设protobuf-py已经按照protobuf的安装说明安装了.发现 protobuf-2.5.0版的python包是pytho ...
- 【Android 应用开发】Ubuntu 下 Android Studio 开发工具使用详解 (旧版本 | 仅作参考)
. 基本上可以导入项目开始使用了 ... . 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/21035637 ...
- 给Cocos2D视图添加手势支持
见如下代码: UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc]initWithTarget:self ac ...
- 为神马精确Sprite的碰撞形状不通过简单的放大Sprite的尺寸来解决?
原因是SoftBodyDrawNode的绘制代码中已经没有完整的,一体化的(incorporate)缩放,旋转或者甚至是精灵的位置(scale,rotation,or even the sprite' ...
- ITU-T Technical Paper: QoS 测量 (目标,方法,协议)
本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...
- Zip操作的工具类
/** * Copyright 2002-2010 the original author is huanghe. */package com.ucap.web.cm.webapp.util; ...
- ROS探索总结(十一)——机器视觉
机器视觉在计算机时代已经越来越流行,摄像头价格越来越低廉,部分集成深度传感器的混合型传感器也逐渐在研究领域普及,例如微软推出的Kinect,而且与之配套的软件功能十分强大,为开发带来了极大的便利.RO ...