zoukankan      html  css  js  c++  java
  • css3实现渐变效果

    首先说明:

    -moz-针对ff
    -webkit-针对chrome、saf4+
    Mozilla和webkit内核浏览器

    渐变分为:
    1】线性渐变:linear
    2】径向渐变:radial

    1)
    webkit内核浏览器(基本语法):

     background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

    第一个参数:渐变类型
    第二个参数:起始点的x y坐标
    第三个参数:结束点的x y坐标
    第四个参数:起始点的颜色
    第五个参数:结束点的颜色

     background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red));
    2)
    Mozilla内核浏览器(基本语法):
    background: -moz-linear-gradient(top, red, blue);

    第一个参数:渐变方向
    第二个参数:起始点的颜色

    第三个参数:结束点的颜色
    background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
    3)
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ff0000"); /* IE6,IE7 */ 
  • 相关阅读:
    Linux基础学习(7)
    Linux基础学习(6)
    Linux基础学习(5)
    Linux基础学习(4)
    Linux基础学习(3)
    测试工程师面试题
    Postman实战
    接口测试
    HTTP请求结构与HTTP响应结构
    GET请求与POST请求的区别
  • 原文地址:https://www.cnblogs.com/xiaonvziyi/p/3224356.html
Copyright © 2011-2022 走看看