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浏览器都是没效果的。

  • 相关阅读:
    javascript第七章--DOM
    javascript第六章--BOM
    javascript第五章--函数表达式
    javascript第四章--面向对象的程序设计
    javascript第三章--引用类型
    javascript第二章--变量、作用域和内存问题
    Java 成员变量的区分
    equals 与"=="的区别
    java 基础数据类型
    一个带倒计时按钮的代码片段
  • 原文地址:https://www.cnblogs.com/JavaTechLover/p/2561005.html
Copyright © 2011-2022 走看看