渐变

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的线性渐变（linear-gradient）
CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div ...
css3背景颜色渐变属性兼容性测试基础环境为：windows系统；IE6&period;0+, Firefox4&period;0+, Chrome4&period;0+, Safari4&period;0+, Opera15&period;0+
css3背景颜色渐变属性兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
创建CSS3警示框渐变动画
来源:GBin1.com 在线演示在线下载现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...
CSS3下的渐变文字效果实现
如下,第一种方法已实践一.方法一:借助mask-image属性可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
CSS3透明背景+渐变样式
CSS3透明背景+渐变样式转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...
CSS3 linear-gradient线性渐变实现虚线等简单实用图形
一.作为图片存在的CSS3 gradient渐变我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是bac ...
小tip&colon;CSS3下的渐变文字效果实现——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...
CSS3 Gradients（渐变）
CSS3 Gradients(渐变) 一.简介 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐 ...
关于css3背景图片渐变的规则
1. Webkit引擎的CSS3径向渐变语法 Webkit引擎下的老版本语法:-webkit-gradient([<type>],[<position> || & ...

随机推荐

C&num; 蓝牙编程
C#进行蓝牙编程本节我们给大家用源码的形式给大家介绍如何用C#调用蓝牙.下面的源码是基于destop的C#调用蓝牙的程序,也就是使用普通版本的.NET Framework来调用编程,一般是有蓝牙的笔 ...
[SQL Server 系] -- 模糊查询
SQL Server中的通配符有下面四种通配符说明 % 包含零个或多个字符的任意字符串 _(下划线) 任意单个字符 [ ] 任意在指定范围或集合中的单个字符 [^ ] 任意不在指定范围或集合中的单 ...
NOI2002robot
这题又是纯数论题…… 独立数就是欧拉函数,政客和军人的含义已经说的很清楚了,学者是最多的…… 首先,如果我们知道了政客和军人的答案,那就只要用n的所有因子的欧拉函数值减去这两个值,然后取模就行了. 但 ...
FTP链接mac
mac下一般用smb服务来进行远程文件访问,但要用FTP的话,高版本的mac os默认关掉了,可以用如下命令打开: sudo -s launchctl load -w /System/Library/ ...
Java学习之Java中常用对象
java的几种对象(PO,VO,DAO,BO,POJO)解释一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中 ...
winsock2获取网页
#define WIN32_LEAN_AND_MEAN#include <winsock2.h>#include <stdlib.h>#include <stdio.h& ...
sqlite 的基本使用1
mac 下自带的sqlite3 直接在终端键入 sqlite3 即进入 sqlite的交互界面 1,创建数据库 sqlite3 命令被用来创建新的数据库比如sqlite3 mydb,即创建了一个m ...
JAVA编程入门
java最早是由Sun公司基于C++开发而成的新一代编程语言也是现行下的主流行编程语言,其原始的主要用于嵌入式开发.java的第一个版本为JDK1.0,到2017年已经升级到JAK1.9版本.java ...
gpu相关
1.查看cuda版本 cat /usr/local/cuda/version.txt 2.查看cudnn版本 cat /usr/local/cuda/include/cudnn.h | grep CU ...
Android 下载App
转载:http://blog.csdn.net/aicpzl/article/details/52993074 通过DownloadManager来下载APK到本地,下载完成后收到广播再安装APK,可 ...