zoukankan      html  css  js  c++  java
  • 背景颜色渐变

    背景颜色线性渐变【 linear-gradient】

    语法:

    background:linear-gradient(起点,起点颜色,过度色[可选],终点颜色);

    起点:top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。

    过度色:可以插入多个,表示多种颜色的渐变

    demo

    <style type="text/css" rel="stylesheet">
      .box{
        width: 100px;
        height: 100px;
        margin: 50px auto;
        /*从上之下线性渐变*/
        /*方向,线性渐变开始颜色,线性渐变过度颜色,线性渐变最终颜色,20px表示距某个方向20px开始*/
        background: -moz-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -webkit-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -o-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: -ms-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        background: linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
        /*根据给定角度线性渐变*/
        background: -moz-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -webkit-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -o-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: -ms-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        background: linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
        /*从左上角到右下角线性渐变*/
        background: -moz-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -webkit-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -o-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: -ms-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
        background: linear-gradient(top right, #0099ff, #ffffff, #00cc00);
      }
    </style>
    
    <div class="box"></div>
  • 相关阅读:
    面向对象实验 ——(二)类与对象
    [LeetCode] 957. Prison Cells After N Days
    [LeetCode] 32. Longest Valid Parentheses
    [LeetCode] 120. Triangle
    [LeetCode] 441. Arranging Coins
    [LeetCode] 79. Word Search
    [LeetCode] 1143. Longest Common Subsequence
    [LeetCode] 718. Maximum Length of Repeated Subarray
    [LeetCode] 332. Reconstruct Itinerary
    [LeetCode] 279. Perfect Squares
  • 原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8361877.html
Copyright © 2011-2022 走看看