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>

    高手勿喷啊!

  • 相关阅读:
    poj 3304 Segments 直线 线段求交
    poj 1077 Eight 八数码 A*算法
    UESTC 1447 Area 凸包+旋转卡壳 求最大四边形面积
    ACM计算几何题目推荐(第二期)
    poj 2398 Toy Storage 叉乘
    ACM计算几何题目推荐 (第一期)
    (转载)Telnet协议详解及使用C# 用Socket 编程来实现Telnet协议
    jquery 表情编辑器
    (读书笔记)Asp.net Mvc 与WebForm 混合开发
    (转载)精简说明C#最基本的Socket编程示例
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5141826.html
Copyright © 2011-2022 走看看