zoukankan      html  css  js  c++  java
  • CSS3径向渐变linear-gradient

    语法:

    选择器{ 
        background:linear-gradien(线性渐变的方向,起点颜色,终点颜色); 
    }

    第一个参数:[可选参数,默认从上到下] 线性渐变的方向:top,bottom,left,right,top left;

    第二个和第三个参数:起点颜色和终点颜色,其实中间可以插入更多的颜色,以实现多色渐变效果;支持直接写颜色,或16进制颜色

    兼容性问题:

    支持chrome和火狐,其他浏览器尚未测试,部分支持IE10,

    为了支持chrome和火狐,要分别写上-webkit-,-moz-

    比如:

    div{
        background:-webkit-linear-gradient(top,red,blue);/*谷歌*/    
        background:-moz-linear-gradient(top,red,blue);  /*火狐*/
        background:linear-gradient(top,red,blue);  /*ie10*/
             
    }

    之所以说部分支持IE10,是因为我测试时,第一个参数,写了多种之后,发现IE10只支持少数的几种方向。

    ie6~9的背景色渐变:

    其实是用了filter滤镜来做:

    .div{
                filter: progid:DXImageTransform.Microsoft.gradient(
                    GradientType=0,
                    startColorstr=pink,
                    endColorstr=black
                );
                /*IE7*8*9有效*/

    其中:GradientType=1代表纵向,0代表横向

  • 相关阅读:
    收藏本站
    JS动态生成ID+JS绑定数据
    CSS样式a:link
    C#绑定gridview
    jQuery checkbox 全选、全取消
    JS打开新窗口
    中用图片代替浏览按钮
    给button端添加客户端方法
    jQuery操作 checkbox 的全选、反选 , radio, select 功能
    C#弹出对话框
  • 原文地址:https://www.cnblogs.com/hamsterPP/p/4825075.html
Copyright © 2011-2022 走看看