一.线性渐变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. Spring SpringMVC SpringBoot SpringCloud 注解整理大全

    Spring SpringMVC SpringBoot SpringCloud 注解整理 才开的博客所以放了一篇以前整理的文档,如果有需要添加修改的地方欢迎指正,我会修改的φ(๑˃∀˂๑)♪ Spri ...

  2. springboot项目中进行并发测试

    一 利用工具包: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  3. Activiti流程变量

    流程变量在整个工作流中扮演很重要的作用 例如:请假流程中有请假天数.请假原因等一些参数都为流程变量的范围.流程变量的作用域范围是流程实例.也就是说各个流程实例的流程变量是不相互影响的. 添加流程变量 ...

  4. tensorflow/models 下面的data_augment_options的random_image_scale

    这个random_image_scale应该是改变整个图片的大小,而不是“box”图片的大小

  5. Vue:$route 和 $router 的区别

    参考: https://uzshare.com/view/788446 https://router.vuejs.org/zh/ $route 是“路由信息对象”,包括 path,params,has ...

  6. mybatis使用Example进行条件查询

    参考: https://www.cnblogs.com/zhemeban/p/7183061.html Example类是什么? Example类指定如何构建一个动态的where子句. 表中的每个no ...

  7. Leetcode965. Univalued Binary Tree单值二叉树

    如果二叉树每个节点都具有相同的值,那么该二叉树就是单值二叉树. 只有给定的树是单值二叉树时,才返回 true:否则返回 false. 示例 1: 输入:[1,1,1,1,1,null,1] 输出:tr ...

  8. 【心无旁骛】vue-ts-daily

    这是一个非常有意思的项目,我们先来看看效果 这个项目所用的技术也比较有意思,它的技术栈为vue2.5 + Typescript + vuex + vue-router 放下博主的项目地址吧,https ...

  9. cannot be cast to javax.servlet.Servlet 解决

    使用maven创建web项目的时候,通过添加依赖的方式来添加servlet-api,如下 通过maven的命令(tomcat:run)来启动项目,发现访问的时候报错,错误如下: 错误排查: 首先查看s ...

  10. UOJ#449 喂鸽子

    题意:有n个鸽子,你每秒随机喂一只鸽子,每只鸽子吃k次就饱了.求期望多少秒之后全饱了.n <= 50, k <= 1000. 解:有两种做法.一种直接DP的n2k做法在这.我用的是Min- ...