background:linear-gradient()
文章一 http://www.runoob.com/css3/css3-gradients.html
文章二:http://www.w3cplus.com/content/css3-gradient
自己试验一点:
e.g: background:linear-gradient(90deg,red 20%,blue 40%,yellow 50%,green 60%)的含义解释:
1:90deg表示从左往右(等同于to right),0deg表示从下往上(to top)
2:颜色可以任意多个,中间的百分比(或者用长度也行)表示颜色位置,具体的本例含义经测试理解如下:
从开始到20%位置处为纯红色,20%-40%处为红蓝渐变(40%处为纯蓝色),40%-50%处为蓝黄渐变区域(50%处是纯黄),50%-60%为黄绿渐变区域,60%之后到结束为纯绿色。
如果后面的颜色百分比小于前面的,则后面的数字无效,其大小按照前面的那个数字计算。(如50%如果变为30%,则此30%无效,将会按照40%计算)。
P.S. 以后这种细节性的东西在闲暇时再研究,不能浪费时间和精力在这上面(现在深深的感觉到精力有限啊)。GO
background:linear-gradient()的更多相关文章
- FCC---Create a Gradual CSS Linear Gradient
Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...
- CSS3 & gradient & color & background
CSS3 & gradient & color & background css background https://developer.mozilla.org/en-US/ ...
- 兼容当前多浏览器的渐变颜色背景gradient的写法
经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对gradi ...
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- CSS3 Gradient
CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...
- 兼容当前五大浏览器的渐变颜色背景gradient的写法
<style type="text/css" media="screen"> #gradient { width: 200px; height: 2 ...
- CSS3 Gradient渐变效果
最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...
- 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- CSS Gradient文字效果
你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...
- HTML5资料
1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...
随机推荐
- 使用node-webkit开发exe窗口程序
首发:个人博客,更新&纠错&回复 ====关于原生程序与壳中程序的议论begin==== 在所有用户windows机器上都能直接跑的程序,如果不采用微软系的语言,如VB,C++,C#等 ...
- PS4 的下载速度问题
折腾了好久了 AC68u路由自启动修改 hosts 问题,打算FQ另外改善 ps4 下载速度太慢问题. 后来看到几个dns, 直接修改后就速度超快,也不用在路由中添加了, 直接在 ps4 中网络设置中 ...
- linux设备驱动归纳总结(七):1.时间管理与内核延时【转】
本文转载自:http://blog.chinaunix.net/uid-25014876-id-100005.html linux设备驱动归纳总结(七):1.时间管理与内核延时 xxxxxxxxxxx ...
- TI CC2541的狗日的Key
被突如其来的一个bug困扰了好几天, 起因是, 按键接的红外接收器, 结果发现, 一旦按下之后, IEN1, P0IE的标识位bit5, 被不知道特么的谁归0了, 也就是说, 按键只能被按下一次, 再 ...
- android:layout_gravity和android:gravity属性的区别
一.介绍: gravity的中文意思就是”重心“,就是表示view横向和纵向的停靠位置 (1).android:gravity:是对view控件本身来说的,是用来设置view本身的内容应该显示在vie ...
- MyISAM表杂记实验
一.本文说明 由于刚学mysql所以动手做了一些实验. 二.实验内容 1.验证MyISAM有AUOT_INCREMENT coloumn功能 ----在这里是对现有表t,增加一个主键----mysql ...
- 【PHP设计模式 01_DuoTai.php】多态的说明
<?php /** * [多态] * 定义一个抽象类:Tiger,有两个子类:XTiger 和 MTiger */ header("Content-type: text/html; c ...
- JavaEE基础(一)
1.计算机基础知识(计算机概述) A:什么是计算机?计算机在生活中的应用举例 计算机(Computer)全称:电子计算机,俗称电脑.是一种能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备. ...
- android技术总结
1.要做一个尽可能流畅的ListView,你平时在工作中如何进行优化的? ①Item布局,层级越少越好,使用hierarchyview工具查看优化. ②复用convertView ③使用ViewHol ...
- c#sqlhelper之用法
MySqlParameter[] a=new MySqlParameter[]{new MySqlParameter("@stu_id",stu_id)}; 参数使用