CSS3_线性渐变_径向渐变----背景

时间:2024-01-21 00:03:21

渐变的本质: 绘制一张背景图片,所以使用 background 或者 background-image

background 的诸多属性,渐变都是可以使用的(repeat,position)

百分比: 把元素渐变方向的整体长度看成 100%

线性渐变背景

  • 使用:    (至少三个参数,从第二个参数开始,都是颜色)
  • background-image: linear-gradient( 方向    开始颜色    结束颜色);
  • 方向
    • 默认值(从上到下)
      • background-image: linear-gradient(#000, #fff);
    • to right    到右
      • background-image: linear-gradient(to right, #000, #fff);
        background-image: linear-gradient(to left, #000, #fff);
        background-image: linear-gradient(to top, #000, #fff);
        background-image: linear-gradient(to bottom, #000, #fff);
    • to right bottom    到右下角
      • background-image: linear-gradient(to right bottom, #000, #fff);
        background-image: linear-gradient(to right top, #000, #fff);
        background-image: linear-gradient(to left top, #000, #fff);
        background-image: linear-gradient(to left bottom, #000, #fff);
    • 角度 deg
      • background-image: linear-gradient(0deg, #000, #fff);
        background-image: linear-gradient(90deg, #000, #fff);
        background-image: linear-gradient(180deg, #000, #fff);
        background-image: linear-gradient(270deg, #000, #fff); background-image: linear-gradient(45deg, #000, #fff);
        background-image: linear-gradient(135deg, #000, #fff);
        background-image: linear-gradient(225deg, #000, #fff);
        background-image: linear-gradient(315deg, #000, #fff); background-image: linear-gradient(-45deg #000, #fff);
        background-image: linear-gradient(-90deg #000, #fff);
  • 颜色结点
    • background-image: linear-gradient(red %10, green 20%, blue 30%, yellow 40%);
      
      /*
      从 0% 到 10% 为 red
      从 10% 到 20% 为 red 到 green 的渐变
      从 20% 到 30% 为 green 到 blue 的渐变
      从 30% 到 40% 为 blue 到 yellow 的渐变
      从 40% 到 100% 为 yellow 最后一个颜色百分比不写,默认到 100%
      第一个颜色百分比不写,默认 0%
      */
  • 应用: 45 度红白格(马赛克地砖)    
  • 明确的 颜色分割线(red 25%, white 25%)
  • 多重渐变背景,以逗号隔开,适当位置设置透明颜色
    • 123

重复的线性渐变 background-image: repeating-linear-gradient(45deg, red 0%, white 20%);

  • 颜色结点,除了可以写百分值,还可以写一个具体的像素值。写像素值,必须写两个值:起始和结束。
    • background-image: repeating-linear-gradient(45deg, white 0px, white 10px, red 10px, red 20px;    // 发廊灯
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title></title> <style type="text/css">
    body {
    width: 100%;
    color: #000;
    background: #96b377;
    font: 14px Helvetica, Arial, sans-serif;
    } #outer_box {
    width: 100px;
    height: 300px;
    margin: 300px auto 0; overflow: hidden
    } #inner_box {
    width: 100px;
    height: 3000px;
    margin-top: -900px; background-image: repeating-linear-gradient(155deg, red 0px, red 20px, black 20px, black 40px);
    } #inner_box:hover {
    margin-top: 0px;
    transition: 9s;
    }
    </style>
    </head> <body> <div id="outer_box">
    <div id="inner_box">
    </div>
    </div> </body>
    </html>
  • 文字光斑 动画
  • 文字要设置透明 color: rgba(255, 255, 255, 0.3);
  • 3

径向渐变背景 background-image: radia-gradient(形状尺寸, 开始颜色, 结束颜色);

从起点到终点,颜色从内向外渐变。

  • 形状尺寸 参数
  • circle 默认形状,圆形
  • 当 width 相等 height 时,总是圆形
  • 当 width != height 时,是椭圆
  • 颜色结点
  • 百分比,参照圆心到最远端的距离
  • 尺寸大小
    • closest-side circle    最近边
    • farthest-side circle    最远边
    • closest-corner    最近角
    • farthest-corner    最远角
  • at 设置圆心
    • background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
    • background-image: radial-gradient(closest-corner circle at 50px 50px, olive, red);
  • 重复的径向渐变 background-image: repeating-radial-gradient(red 0%, olive 25%);
    • background-image: repeating-radial-gradient(red 0%, olive 25%, blue 50%);