zoukankan      html  css  js  c++  java
  • css实现背景渐变色效果

    webkit内核的浏览器,例如(chrome,safari等)

    background:-webkit-gradient(linear,0 0,0 100%,from(#000000),to(#ffffff));

    第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变);
    第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角);
    第四个和第五个参数,分别是起始点颜色和终点颜色;

    Firefox浏览器

    background: -moz-linear-gradient(#000000, #ffffff);

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

    线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient).

    Opera浏览器

    类似于Firefox

    background: -o-linear-gradient(#000000, #ffffff);

    IE浏览器(兼容性问题很恶心,此处仅供参考)

    IE滤镜

    filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=0,finishx=50,finishy=50)

    opacity 表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
    finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
    style用来指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形。
    startx 渐变透明效果开始处的 X坐标。
    starty 渐变透明效果开始处的 Y坐标。
    finishx 渐变透明效果结束处的 X坐标。
    finishy 渐变透明效果结束处的 Y坐标。

  • 相关阅读:
    scala中List、Array、ListBuffer、ArrayList、Set
    Spark Pipeline
    Spark MLlib
    minikube
    proxychains 安装
    网络性能测试
    Flexvolume
    kubectl 获取信息
    centos7 莫名重起的问题
    fio 测试磁盘
  • 原文地址:https://www.cnblogs.com/jiyang2008/p/4963160.html
Copyright © 2011-2022 走看看