zoukankan      html  css  js  c++  java
  • 纯CSS做背景渐变

    针对不同的的浏览器语句写法稍有不同。
    Gecko引擎的使用的语句为“ -moz-linear-gradient”,而WebKit的引擎使用的是-webkit-gradient。有略微的不同,但实现效果是一样的。

    基于gecko的浏览器(Firefox):
    linear线性渐变是该语句的一部分
    top:顶部渐变开始的地方
    #FFFFFF 十六进制的颜色渐变的开始颜色(白色)
    #003366  十六进制的颜色渐变的结束颜色(深蓝色)

    基于Webkit的浏览器(Chrome, Safari):
    linear作为-webkit-gradient的值的一部分,放在括号内。
    left top左上角声明梯度开始
    left bottom左下角声明梯度完成
    from(#55aaee)渐变的开始颜色(#FFFFFF)十六进制的颜色代码(白色)
    to(#003366)渐变结束颜色(#003366)十六进制的颜色代码(深蓝色)

    for example:
    HTML CODE:

    <div class=”css.grd”>
    <p>对div元素应用CSS背景色渐变</p>
    <div>

    CSS CODE:

    .css-grd {
    /* default background colour, for all layout engines that don’t implement gradients */
    background: #2a6da9;

    /* gecko based browsers */
    background: -moz-linear-gradient(top, #FFFFFF, #003366);

    /* webkit based browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#003366));

    color: #000000; /* text colour (black) */
    height: auto;     /* gradient uses the full height of the element */
    padding: 5px;   /*  distance from border edge to text */
    }

    注意:以上这些方法对IE浏览器都是没效果的。

  • 相关阅读:
    PHP 中 define() 和 const 定义常量时的区别
    tar 解压常用压缩文件格式命令大全
    JVM的GC策略
    守护线程(Daemon Thread)
    探索HashMap实现原理及其在jdk8数据结构的改进
    Java面试& HashMap实现原理分析
    Java分布式应用
    全面理解Java内存模型
    Java& Vector与ArrayList区别
    深入理解Java虚拟机&运行时数据区
  • 原文地址:https://www.cnblogs.com/JavaTechLover/p/2561005.html
Copyright © 2011-2022 走看看