2013年11月15日13:08:37

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div {
        width:200px;
        height:100px;
        border:2px solid #000;
        float:left;
        margin-right:10px;
        margin-bottom:10px;
        }
        .box1 {
            background:-moz-radial-gradient(#cccc98,#cd3298,#98cb04);
            background:-webkit-radial-gradient(#cccc98,#cd3298,#98cb04);
          
        }
        .box2 {
            background:-moz-radial-gradient(#ff6766 5%,#fffe03 25%,#3199cc 50%);
            background:-webkit-radial-gradient(#ff6766 5%,#fffe03 25%,#3199cc 50%);
        }
        /*圆形circle渐变*/
        .box3 {
        background:-moz-radial-gradient(bottom left,circle,#ff6600,#ffff66,#009865);
        background:-webkit-radial-gradient(bottom left,circle,#ff6600,#ffff66,#009865)
        }
        /*椭圆形ellipse渐变*/
        .box4 {
            background:-moz-radial-gradient(left bottom,ellipse,#cb9998,#feff99,#666793);
        background:-webkit-radial-gradient(left bottom,ellipse,#cb9998,#feff99,#666793);
        }

/*大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner,
                 farthest-side, farthest-corner, contain or cover)）*/
          /*没看懂start*/
          .box5 {
        background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
        }
        .box6 {
        background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
        }

.box7 {
     background: -moz-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
        }
        .box8 {
        background: -moz-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
        }
        /*没看懂end*/

.box9 {
             background:-moz-radial-gradient(#cc6733,#ffca97,#009997);
        background:-webkit-radial-gradient(#cc6733,#ffca97,#009997)
        }
        .box10 {
              background:-moz-radial-gradient(contain,#cc6733,#ffca97,#009997);
        background:-webkit-radial-gradient(contain,#cc6733,#ffca97,#009997)
        }
        /*下面这个实例应用的是Positioned, Sized，请看代码和效果*//*不懂啊*/
        .box11 {
        background: -moz-radial-gradient(80% 20%, closest-corner, #3199cc, #ff656b);
       background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#3199cc), to(#ff656b));
       background: -webkit-radial-gradient(80% 20%, closest-corner, #3199cc, #ff656b);
        }
        /*不懂重复渐变后面px定义的意思start*/
        .box12 {
    background:-moz-repeating-radial-gradient(#000,#000 5px,#ff0 5px,#ccc 10px);
    background:-webkit-repeating-radial-gradient(#000,#000 5px,#ff0 5px,#ccc 10px);
}
        .box13 {
        background:-moz-repeating-linear-gradient(left bottom,#000,#000 5px,#ff0 5px,#ccc 10px);
        background:-webkit-repeating-linear-gradient(left bottom,#000,#000 5px,#ff0 5px,#ccc 10px);
        }
 /*不懂重复渐变后面px定义的意思end*/

</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5">closest-side最近端</div>
    <div class="box6">farthest-corner最远角</div>
    <div class="box7">closest-side</div>
    <div class="box8">farthest-side最远端</div>

<div class="box9">正常</div>
    <div class="box10">contain包含</div>
     <div class="box11">下面这个实例应用的是Positioned, Sized</div>
    <div class="box12">重复渐变-moz-repeating-linear-gradient和-moz-repeating-radial-gradient</div>
    <div class="box13"></div>
  
</body>
</html>

镜像渐变-radio-gradient的更多相关文章

  1. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  2. 第161天：CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  3. CSS实现兼容性的渐变背景(gradient)效果

    利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...

  4. CSS3魔法堂：背景渐变（Gradient）

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  5. iOS 2D绘图详解（Quartz 2D）之阴影和渐变(Shadow,Gradient)

    前言:这个系列写道这里已经是第五篇了,本文会介绍下阴影和渐变的基础知识,以及一些基本的Demo Code展示,应该还会有两篇,介绍下Bitmap绘制以及Pattern等知识. Shadow shado ...

  6. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

  7. CSS3：渐变大全

    渐变大全 声明 最后的老写法镜像渐变可能不太准确.其余都完全正确 <!DOCTYPE html> <html> <head> <meta http-equiv ...

  8. CSS3奇特的渐变示例

    渐变 4个维度去理解渐变 线性渐变 径向渐变 新写法 老写法 最后的老写法镜像渐变可能不太准确.其余都完全正确 <!DOCTYPE html> <html> <head& ...

  9. Android线性渐变

    布局实现: 1. 在res中建立drawable文件夹. 2. 在drawable文件夹中建立shape.xml. 3. shape.xml的代码如下: <?xml version=" ...

随机推荐

  1. 常用ADB命令

    adb devices          查看当前已与pc端连接的设备序列号 adb install -r   +apk名称     安装应用程序(带-r参数表示强制安装,可以覆盖安装) adb un ...

  2. [转]-Android Studio 快捷键整理分享-SadieYu

    文章编辑整理:Android Studio 中文组 - SadieYu Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 ...

  3. iOS - MVP 架构模式

    1.MVP 从字面意思来理解,MVP 即 Modal View Presenter(模型 视图 协调器),MVP 实现了 Cocoa 的 MVC 的愿景.MVP 的协调器 Presenter 并没有对 ...

  4. c 函数调用产生的汇编指令和数据在内存情况(2)

    c 函数调用产生的汇编指令和数据在内存情况(1) 一直对函数调用的具体汇编指令和各种变量在内存的具体分配,一知半解.各种资料都很详细,但是不实践,不亲自查看下内存总不能笃定.那就自己做下. 两个目的: ...

  5. Oracle一列的多行数据拼成一行显示字符

    Oracle一列的多行数据拼成一行显示字符   oracle 提供了两个函数WMSYS.WM_CONCAT 和 ListAgg函数.    www.2cto.com   先介绍:WMSYS.WM_CO ...

  6. caffe中的filler.hpp源码的作用：

    filler.hpp文件:(它应该没有对应的.cpp文件,一切实现都是在头文件中定义的,可能是因为filler只分在网络初始化时用到那么一次吧) 1,首先定义了基类:Filler,它包括:一个纯虚函数 ...

  7. C++——对象和类

    最重要的OOP特性: *抽象: *封装和数据隐藏: *多态: *继承: *代码的可重用性: 一.抽象和类 1.类型 指定基本类型完成了三项工作:1).决定数据对象需要的内存数量:2).决定如何解释内存 ...

  8. 使用Mozilla Firefox插件RestClient测试Http API接口

    RESTClient是Mozilla Firefox一个用于测试http请求插件.在火狐附加组件里面查询并安装,非常小巧,界面非常简单,使用非常的方便,看下面这张图你就全明白了,希望对新手有帮助! 1 ...

  9. Ajax 完整教程 (转)

    http://www.cnblogs.com/Garden-blog/archive/2011/03/11/1981778.html

  10. HBase 的存储结构

    HBase 的存储结构 2016-10-17 杜亦舒 HBase 中的表常常是超级大表,这么大的表,在 HBase 中是如何存储的呢?HBase 会对表按行进行切分,划分为多个区域块儿,每个块儿名为  ...