CSS3：渐变大全
渐变
4个维度去理解渐变
线性渐变
径向渐变
新写法
老写法
最后的老写法镜像渐变可能不太准确。其余都完全正确
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS By 李可</title>
<style>
.demo {
width: 300px;
height: 300px;
/********************************************总体介绍***********************************************/
/*
新写法：属性“-...-linear-gradient”有三个参数。
第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。
第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。
webkit老写法：属性“-webkit-gradient”是webkit引擎对渐变的实现，一共有五个参数。
第一个参数表示渐变类型（type），可以是linear（线性渐变）或者radial（辐射渐变）。
第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如left top（左上角）和left bottom（左下角）。
第四个和第五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。
IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。*/
/********************************************线性渐变***********************************************/
/*w3c新写法推荐*/
/*步步加深*/
/*background-image: linear-gradient(to bottom,red,green);*/
/*background-image: linear-gradient(to bottom,red 0%,green 100%); */
/*按照方向，到25%为一直第一种颜色，25%-75%是渐变，75%-100%也是渐变。*/
/*background-image: linear-gradient(to bottom,red 25%,blue75%,green 100%);*/
/*按照方向，到25%为一直第一种颜色，25%两边的颜色分别用2个值写出来。25%-75%是渐变，75%-100%也是渐变。*/
/*background-image: linear-gradient(to bottom,red 25%,yellow 25%,blue 75%,gray 75%,green 100%);*/
/*加上各个浏览器前缀*/
/*background-image:-webkit-linear-gradient( to bottom,red,green); webkit不支持to*/
/*background-image:-webkit-linear-gradient(top,red,green);*/
/*webkit用这个代替*/
/*background-image:-moz-linear-gradient( to bottom,red,green); */
/*moz支持to*/
/*background-image:-ms-linear-gradient( to bottom,red,green); *
/*background-image:-o-linear-gradient( to bottom,red,green);*/
/* moz不支持，但支持-webkit-*/
/*角度：水平为0deg，逆时针转动为正值，顺时针为负值。一周360deg，可以多周转动*/
/*background-image:-moz-linear-gradient(0deg,red,green);*/
/*background-image:-webkit-linear-gradient(270deg,red,green); */
/* background-image:-webkit-linear-gradient(-90deg,red,green); */
/*background-image:-webkit-linear-gradient(450deg,red,green); */
/*新写法实战*/
/*background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);*/
/*background-image: -webkit-linear-gradient(-45deg, red 25%, blue 25%,transparent 50%, green 50%, rgba(255, 255, 255, 0.15) 75%, yellow 75%, transparent);*/
/*只有weblit老写法 ，5个参数*/
/* from to只是2个简单的变色*/
/*background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red),to(green));*/
/*color-stop插在 from to的任意位置*/
/*background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(50%,#ccc), from(red),color-stop(10%,yellow),to(green),color-stop(80%,blue));*/
/*background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#444444),color-stop(1,#999999));*/
/*老写法实战*/
/*后面可以有to()*/
/*background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(222, 255, 255, 0.5)), color-stop(0.25, blue), color-stop(0.5, red), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 1)), color-stop(0.75, transparent), to(rgba(255, 255, 255, 1)));*/
/********************************************ie9以前版本使用滤镜***********************************************/
/*GradientType代表渐变线方向，0为垂直(默认)，1为水平*/
/*ie8*/
/*-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='red', endColorstr='#00ff00');
/*ie6,ie7*/
/*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='red', endColorstr='#00ff00');*/
/******************************bootstrap源码中运用的线性渐变及ie滤镜例子*********************************/
/*
background-color: #dd514c;
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);*/
/********************************************重复线性渐变***********************************************/
/*只有当首尾两颜色位置不在0%或100%时，重复渐变才生效*/
/*方向默认从上到下，假如div高度100，第一个20%决定了以20为起点，最后一个50%减去第一个20%等于=30%，100/30=3，div最少分3份，具体分几分，要看起点*/
/*和和线性渐变的主要区别：起点25%，不表示从0到25%是一种颜色，而是补过来的*/
/*background-image: -webkit-repeating-linear-gradient(blue 20%,green 50%);
background-image: repeating-linear-gradient(blue 20%,green 50%);*/
/*试一试多个*/
/*background-image: -webkit-repeating-linear-gradient(blue 20%,green 30%,yellow 40%);*/
/********************************************径向渐变***********************************************/
/*新写法*/
/*background-image:-webkit-radial-gradient(red 20%,green);不写坐标，默认在中心*/
/*background-image:-webkit-radial-gradient(150px 150px,red 20%,green);坐标数值*/
/*background-image:-webkit-radial-gradient(left bottom,red 20%,green);*/
/*坐标关键词*/
/*径向渐变的默认cover，手动设定为circle，就不会自动填充*/
/*background-image:-webkit-radial-gradient(150px 150px,circle,red 20%,green 70%,yellow 80%);*/
/*径向渐变同一个位置green 100px,transparent 100px,可以实现截断的目的*/
/*径向渐变red 50px,green 100px,transparent 100px,不按百分比*/
/*background-image:-webkit-radial-gradient(40px 50px,red 50px,green 100px,transparent 100px,transparent);*/
/*transparent可以实现一个div上多个“圆”，多个径向渐变*/
/* background-image:-webkit-radial-gradient(40px 50px,red 50px,green 100px,transparent 100px,transparent),
-webkit-radial-gradient(260px 50px,red 50px,green 100px,transparent 100px,transparent),
-webkit-radial-gradient(260px 200px,circle,red 50px,green 100px,transparent 100px,transparent);*/
/*多浏览器*/
/* background-image:-webkit-radial-gradient(center center,red 20%,green);
background-image:-moz-radial-gradient(center center,red 20%,green);
background-image:-ms-radial-gradient(center center,red 20%,green);
background-image:-o-radial-gradient(center center,red 20%,green);*/
/*老写法*/
/*规则：-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)
/* from to只是2个简单的变色*/
/*background-image: -webkit-gradient(radial, 0 0, 50,50 50,60, from(red),to(green));*/
background-image: -webkit-gradient(radial, 1 1, 10, 49 49, 100, color-stop(20%, green), color-stop(20%, red), color-stop(30%, yellow));
/*个人理解：第一个color-stop(20%,green)，起点是内圆圆心，重点是外圆的半径长，不固定。
20%是第一个圆心到外半径的任意比例，这个不是固定的长度，因为在各个方向的20%不相等，内圆圆心不在外圆的圆心上，所以不能填写固定值。*/
/*background-image: -webkit-gradient(radial, 30 50, 10,80 80,70,color-stop(0%,green),color-stop(10%,yellow),color-stop(20%,red),color-stop(50%,yellow),color-stop(80%,blue),color-stop(1,transparent));*/
/*内圆圆心跑到外圆包围圈的情况*/
/*background-image: -webkit-gradient(radial, 190 50, 10,80 80,70,color-stop(0%,green),color-stop(10%,yellow),color-stop(20%,red),color-stop(50%,yellow),color-stop(80%,blue),color-stop(1,transparent))*/
/*常常多个环状效果，晕状效果*/
/*background-image: -webkit-gradient(radial, 50 50, 10,80 80,70,color-stop(0%,green),color-stop(10%,yellow),color-stop(20%,red),color-stop(50%,yellow),color-stop(80%,blue),color-stop(1,transparent)),-webkit-gradient(radial, 150 150, 10,180 180,70,color-stop(0%,green),color-stop(10%,yellow),color-stop(20%,red),color-stop(50%,yellow),color-stop(80%,blue),color-stop(1,transparent));*/
}
</style>
</head>
<body>
<div class="demo">ddd d</div>
</body>
</html>
运行
CSS3：渐变大全的更多相关文章
- css3渐变(Gradients)
<html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- css3 渐变记
css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...
- Css3渐变实例Demo（一）
1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css3渐变详解
今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...
- Web前端方向课程要点：CSS3渐变制作过程
CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现. ...
- 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画
14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...
随机推荐
- oracle的数据库，随笔
不多说,看代码 select b.*,a.kscj,a.paiming from (select t.kch,t.kcm,t.kscj,t.xh, rank() over (order ...
- Netbeans快捷键
一.常用快捷键:1.在文件中查找指定内容 Ctrl+F2.在文件中替换指定内容 Ctrl+H3.在整个项目中查找指定内容 Ctrl+Shift+f4.自动复制整行代码 Ctrl+Shift+上/下方向 ...
- Win8 Cisco VPN Client 442错误解决办法
进入注册表regedit,HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\CVirtA找到DisplayName, x86系统的将值" ...
- ImageLoader实现图片异步加载
ImageLoader是一个广泛使用的图片库,在向网络请求图片时,使用imageView和smartView常会产生outofmemory错误,这时ImageLoader可以起到很大的作用,主要有如下 ...
- Java Hour 38 Weather ( 11 ) – fastjson
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 38 Java 中的 json 反序列化 其实就是所谓的json 转 ...
- POJ3264Balanced Lineup 线段树练手
题目意思:给定Q(1<=Q<=200000)个数A1,A2,```,AQ,多次求任一区间Ai-Aj中最大数和最小数的差 #include <iostream> #include ...
- PUSHA/PUSHAD
http://124.16.151.186/docs/optimization/VTune(TM) User's Guide/mergedProjects/analyzer_ec/mergedProj ...
- 建模算法（五）——图与网络
(一)图与网络的基本概念 一.无向图 含有的元素为顶点,弧和权重,但是没有方向 二.有向图 含有的元素为顶点,弧和权重,弧具有方向. 三.有限图.无限图 顶点和边有限就是有限图,否则就是无限图. 四. ...
- 不自动生成Android Dependencies的解决方式
今天遇到的奇怪问题是网上下载的demo导入第三方包运行后Android: NoClassDefFoundError的错误,原因是第三方的jar包并没有打包进apk里,运行是肯定要出错的. 网上百度了N ...
- P and V
上次,我们已经说过死锁的形成原因以及防止方法了,都知道,之所以会发生死锁现象,原因之一是进程执行所申请的资源得不到满足,而陷入无限期的循环等待现象,而在这里我们说的进程其实是并发进程,也就是一组,至少 ...