zoukankan      html  css  js  c++  java
  • CSS3景颜色渐变(转)

    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);

    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);

    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);

    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);

    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);

    1.从上到下

    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法 */

    2、从左到右

    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法 */

    3、从左上角到右下角

    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

    更多:http://www.runoob.com/css3/css3-gradients.html

    按钮css生成器:http://buttoncssgenerator.com/

     
  • 相关阅读:
    字典序(摘)
    N
    Y
    B
    购物网站和秒杀系统实现技术
    行测技巧:十字交叉法解决比值混合问题
    数学符号读法大全
    搜狐畅游编程题
    sql删除重复记录
    'for' loop initial declarations are only allo
  • 原文地址:https://www.cnblogs.com/oltra/p/5580936.html
Copyright © 2011-2022 走看看