zoukankan      html  css  js  c++  java
  • CSS渐变色

    一. Webkit浏览器

    .xSelector{background:-webkit-gradient(linear, 0 0, 100% 100%, from(#FF82AB), to(#FFA07A));}

    第一个参数:表示的是渐变的类型
    第二个参数:分别对应x,y方向渐变的起始位置
    第三个参数:分别对应x,y方向渐变的终止位置
    第四个参数:设置了起始位置的颜色
    第五个参数:设置了终止位置的颜色

    二.Mozilla浏览器

    .xSelector{background:-moz-linear-gradient(top, #FF82AB, #FFA07A);}

    第一个参数:设置渐变的起始位置
    第二个参数:设置起始位置的颜色
    第三个参数:设置终止位置的颜色

    三.IE 浏览器
    IE浏览器实现渐变只能使用IE自己的滤镜去实现

    .xSelector{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF82AB, endColorstr=#FFA07A, grandientType=1);}

    第一个参数:渐变起始位置的颜色
    第二个参数:渐变终止位置的颜色
    第三个参数:渐变的类型,0 代表竖向渐变,1 代表横向渐变

    最后写在一起就是如下代码

    <!DOCTYPE html>
    <html>
        <head>
            <title>gradient</title>
            <style>
                body{
                    background:-webkit-gradient(linear, 0 0, 100% 100%, from(#FF82AB), to(#FFA07A));
                    background:-moz-linear-gradient(top, #FF82AB, #FFA07A);
                    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF82AB, endColorstr=#FFA07A, grandientType=1);
                }
            </style>
        </head>
        <body></body>
    </html>
  • 相关阅读:
    Jzoj2682 最长双回文串
    Jzoj2682 最长双回文串
    【hdu3853】Loops
    【tyvj1015】【caioj1060】公路乘车
    【luogu1064】金明的预算方案
    【bzoj1260】【CQOI2007】涂色paint
    【UVa1629】Cake slicing
    【NYOJ746】整数划分(四)
    【NYOJ 15】括号匹配2
    【poj2955】Brackets
  • 原文地址:https://www.cnblogs.com/zcynine/p/4982546.html
Copyright © 2011-2022 走看看