zoukankan      html  css  js  c++  java
  • css Gradients(渐变)

    渐变分为4类

    1:线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

    2:径向渐变(Radial Gradients)- 由它们的中心定义

    3:对角渐变

    4:角度渐变

    以下是我写的代码



    div{float: left; 100px;height:100px;}
    .odiv1{
    background:-moz-linear-gradient(red,blue);
    background:-webkit-linear-gradient(red,blue);
    background:-ms-linear-gradient(red,blue);
    background:-o-linear-gradient(red,blue);
    background:linear-gradient(red,blue);/*线性渐变默认情况下是从上到下*/
    }
    .odiv2{
    background:-moz-radial-gradient(red,blue);
    background:-webkit-radial-gradient(red,blue);
    background:-ms-radial-gradient(red,blue);
    background:-o-radial-gradient(red,blue);
    background: radial-gradient(red,blue);/*径向渐变*/
    }
    .odiv3{/* 标准的语法(必须放在最后) */
    background:-webkit-linear-gradient(right,red,blue);
    background:-moz-linear-gradient(right,red,blue) ;
    background:-ms-linear-gradient(right,red,blue);
    background:-o-linear-gradient(right,red,blue);
    background: linear-gradient(to right,red,blue);/*从右向左渐变*/
    }
    .odiv4{/*对角渐变左上角開始(到右下角)的线性渐变*/
    background: -webkit-linear-gradient(left top,red,blue);
    background:-moz-linear-gradient(bottom right,red,blue);
    background: -ms-linear-gradient(bottom right,red,blue);
    background: -o-linear-gradient(bottom right,red,blue);
    background:linear-gradient(to bottom right,red,blue);
    }
    .odiv5{/*以60度进行的渐变*/
    background:-webkit-linear-gradient(60deg,red,blue);
    background:-moz-linear-gradient(60deg,red,blue) ;
    background:-ms-linear-gradient(60deg,red,blue);
    background:-o-linear-gradient(60deg,red,blue);
    background:linear-gradient(60deg,red,blue);
    }


    <div class="odiv1"></div>
    <div class="odiv2"></div>
    <div class="odiv3"></div>
    <div class="odiv4"></div>
    <div class="odiv5"></div>

    高手勿喷啊!

  • 相关阅读:
    NSCoder
    OC_NSString、
    OC_内存管理(二)对象复制、循环引用问题、自动释放池
    OC_id类型
    OC_内存管理
    当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值。 sql server 临时表
    c# 访问SQL Server 其他会话正在使用事务的上下文
    EF 中事务的书写
    iis 不能访问json文件
    在开源中国(oschina)git中新建标签(tags)
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5141826.html
Copyright © 2011-2022 走看看