zoukankan      html  css  js  c++  java
  • css3 Gradient线性渐变详解

    CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient

    我们主要看看Mozilla,Webkit,Opera下的应用

    在Mozilla的应用下:

    其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

    <div class="example"></div>
    .example{
          100px;height:100px;
          background:moz-linear-gradient(top,#ccc,#000)
        }

    -webkit应用:

    -webkit-gradient,一共五个参数,第一个:渐变类型(可以是linear线性渐变或者radial径向渐变);

    第二个和第三个是一对值,分别是表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如left top ;left bottom.

    第四个和第五个参数,分别是color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

    旧写法:

    background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));
    

    新写法:

    -webkit-linear-gradient(top,#aaa,#000);
    

    Opera下的应用:

    参数:-o-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

    -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */
  • 相关阅读:
    c#导出导出excel的两种方法
    jsonp跨域访问
    javascrip中部分函数总结
    vue.js开发环境初步搭建、脚手架工具安装(node.js安装)
    Java SE、Java EE、Java ME基本区别
    Ubuntu10.04上apache2: bad user name ${APACHE_RUN_USER}问题解决
    Ubuntu 下安装 webmin1.54
    View的setOnClickListener的添加方法
    android 耳机按钮
    响应键盘事件
  • 原文地址:https://www.cnblogs.com/Jessical8619/p/9098644.html
Copyright © 2011-2022 走看看