一.线性渐变linear-gradient

 1.使用方法：

background:-webkit-linear-gradient(red,blue);
background:-moz-linear-gradient(red,blue);
background:linear-gradient(red,blue);

2.拓展应用

光斑：
<style>
.box{width: 300px;height: 300px;transition: 1s;
    background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,0.9) 170px,rgba(255,255,255,0.9) 180px,rgba(255,255,255,0) 210px) no-repeat -220px 0,url("img/new_bg.png") no-repeat;}
.box:hover{background-position: 300px 0,-100px -100px;}
</style>

<body>
<div class="box"></div>
</body>

二.径向渐变radial-gradient

  1.使用方法：

background:-webkit-radial-gradient(red,blue);

background:-webkit-radial-gradient(100px 50px,circle,red,blue);  //形状： ellipse、circle或者具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;  firefox目前只支持关键字
 

三.兼容问题

<style>
    .box{width:300px;height:300px;
        background:-webkit-linear-gradient(red,blue); //saifari Google
        background:-moz-linear-gradient(red,blue); //兼容FF
        background:linear-gradient(red,blue); //IE11 10
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');}    //兼容IE 9以下至6   只能兼容线性渐变  GradientType='0'或者‘1’
</style>

<body>
<div class="box"></div>
</body>

CSS3渐变效果的更多相关文章

  1. CSS3 渐变效果

    CSS3 渐变效果 background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-im ...

  2. CSS3渐变效果工具

    推荐一个css3渐变效果工具,觉得有帮助的可以收藏下. 工具链接 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡.CSS3 定义了两种类型的渐变(gradient ...

  3. 第 22 章 CSS3 渐变效果

    学习要点: 1.线性渐变 2.径向渐变 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变. 一．线性渐变 CSS3 提供了 li ...

  4. 渐变背景 css3渐变效果及代码

    渐变背景及代码  http://uigradients.com/#Behongo

  5. transition css3 渐变效果

    div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transiti ...

  6. 利用css3渐变效果实现圆环旋转效果

    * { margin: 0; padding: 0; } .stage { width: 200px; height: 130px; margin: 100px auto; position: rel ...

  7. Web开发者选择的最佳HTML5/CSS3代码生成器

    原文地址:http://codecloud.net/css3-code-generators-for-web-programmers-6672.htmlHTML5 和CSS3是一入门就能用的最好的语言 ...

  8. Css3 - 全面学习

    css3实验.生成.学习网站 http://www.css3maker.com/ http://www.css3.me/ 查询前缀和兼容性 http://caniuse.com/ 1.文本阴影 < ...

  9. CSS3笔记

    CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...

随机推荐

  1. Ubuntu 16.04下apt安装ssh及卸载（含FileZilla 使用过程）

    前言:文件发布测试过程中需要使用Windows和Ubuntu实现文件共享. 以下内容转载自:http://blog.csdn.net/jiang13479/article/details/535014 ...

  2. 牛客NOIP暑期七天营-TG1 赛后题解

    目录 牛客NOIP暑期七天营-提高组1 A-最短路 题目描述 link 题解 代码 B-最小生成链 题目描述 link 题解 代码 C-最小字典最短路 题目描述 link 题解 Update 牛客NO ...

  3. bash之set命令

    set命令是 Bash 脚本的重要环节,却常常被忽视,导致脚本的安全性和可维护性出问题.本文介绍它的基本用法,让你可以更安心地使用 Bash 脚本. 一.简介 我们知道,Bash 执行脚本的时候,会创 ...

  4. Linux C类型

    BOOL: http://www.cnblogs.com/pharen/archive/2012/02/06/2340257.html GCC编译器参数介绍: http://blog.csdn.net ...

  5. 工控安全入门（三）—— 再解S7comm

    之前的文章我们都是在ctf的基础上学习工控协议知识的,显然这样对于S7comm的认识还不够深刻,这次就做一个实战补全,看看S7comm还有哪些值得我们深挖的地方. 本篇是对S7comm的补全和实战,阅 ...

  6. python 获取公网 ip

    from urllib2 import urlopen my_ip = urlopen('http://ip.42.pl/raw').read() print 'ip.42.pl', my_ip fr ...

  7. 线段树区间更新+区间求和模板（数组实现）洛谷p3372，p3373

    模板题目1:https://www.luogu.org/problemnew/show/P3372 懒惰标记讲解:https://www.cnblogs.com/wushengyang/p/11194 ...

  8. ms12-020复现-xp蓝屏

    漏洞名:MS12-020(全称:Microsoft windows远程桌面协议RDP远程代码执行漏洞) 介绍:RDP协议是一个多通道的协议,让用户连上提供微软终端机服务的电脑. windows在处理某 ...

  9. Luogu P1073 最优贸易(最短路)

    P1073 最优贸易 题意 题目描述 \(C\)国有\(n\)个大城市和\(m\)条道路,每条道路连接这\(n\)个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这\(m\)条道路中有 ...

  10. 读取复杂结构的yml配置项

    1.yml配置项示例:(List的集合在第一项前面加 “-”) rabbitmqsetting: exchangeList: - name: e1 type: topic bindingList: - ...