一.线性渐变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. springMVC和springBoot区别

    Spring MVC是什么?(1)Spring MVC是Spring提供的一个强大而灵活的模块式web框架.通过Dispatcher Servlet, ModelAndView 和 View Reso ...

  2. 【codeforces 507E】Breaking Good

    [题目链接]:https://vjudge.net/contest/164884#problem/D [题意] 给你一张图; 图中有些路是完好的;但有些路还没修好; 先不管路有没有修好; 问你从起点到 ...

  3. BZOJ 2165: 大楼

    Time Limit: 40 Sec Memory Limit: 259 MB Submit: 957 Solved: 353 [Submit][Status][Discuss] Descriptio ...

  4. 吴恩达《机器学习》课程总结(5)_logistic回归

    Q1分类问题 回归问题的输出可能是很大的数,而在分类问题中,比如二分类,希望输出的值是0或1,如何将回归输出的值转换成分类的输出0,1成为关键.注意logistics回归又称 逻辑回归,但他是分类问题 ...

  5. SQL Server 2008 分区函数和分区表

      当我们数据量比较大的时候,我们需要将大型表拆分为多个较小的表,则只访问部门数据的查询就可以更快的运行,基本原理就是,因为要扫描的数据变的更小.维护任务(例如,重新生成索引或备份表)也可以更快的运行 ...

  6. Java导出excel文件（使用jxl）

    首先要导入jxl的jar包,可以去maven仓库下载:https://mvnrepository.com/artifact/net.sourceforge.jexcelapi/jxl 通过模拟实现创建 ...

  7. PAT甲级——A1021 Deepest Root

    A graph which is connected and acyclic can be considered a tree. The height of the tree depends on t ...

  8. 状态模式(State)（开关灯，状态实例为类，不同状态，不同行为）

    (当一个对象内在状态改变时允许其改变行为,这个对象看起来像改变了其类.) 在软件开发过程中,很多对象也会像水和信号灯一样具有多种状态,这些状态在某些情况下能够相互转换,而且对象在不同的状态下也将有不同 ...

  9. DAO设计模式总结

    1.DAO(Data Access Object,数据访问对象),主要的功能是用于进行数据操作的,在程序的标准开发框架中属于数据层的操作. 数据开发结构流程: 资源层是数据库的操作层,里面可以进行各种 ...

  10. 解决import javafx.geometry.Point2D无法导入的问题

    windows->preferences->java->compiler->errors/warning->deprecated and restricted API-& ...