CSS之渐变

一直学习的程序员L

已于 2023-08-11 11:01:59 修改

阅读量2.2k

点赞数 1

文章标签： css 前端

于 2023-07-12 18:11:29 首次发布

本文链接：https://blog.csdn.net/weixin_45604020/article/details/131685271

版权

CSS之渐变

一、线性渐变
- 1.1 线性渐变案例
二、径向渐变

作用：渐变被用于很场景，最常见的是给图片添加渐变背景色，目的是突出图片上的文字，让文字看起来更加清晰。

一、线性渐变

在这里插入图片描述

线性渐变：颜色呈直线变化，由浅到深。

做法：
- background-image: linear-gradient
  (
  to 渐变方向（可省略），
  渐变颜色1 颜色终点位置（可省略），
  渐变颜色2 颜色终点位置（可省略），
  );
渐变方向：
- top、right、bottom、left；
- 角度deg
颜色终点位置：百分比

<style>
      div{
        width: 200px;
        height: 200px;
        background-color: #999999;
        /*最简单做法*/
        background-image: linear-gradient(red,green);
        /*复杂做法*/
        background-image: linear-gradient(
          to right,
          red 80%,
          green
        );
      }
</style>
<body>
  <div></div>
</body>

在这里插入图片描述

1.1 线性渐变案例

在这里插入图片描述

 <style>
        .box{
            position: relative;
            margin: 100px auto;
            width: 720px;
        }
        img{
            position: relative;
            width: 720px;
            height: 420px;
        }
        .txt{
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            font-size: 80px;
            color: white;
            font-weight: 700;
            font-family:楷体;
            /*让文字在上方，渐变出现时文字更清晰*/
            z-index: 2;
        }
        .mask{
            width: 720px;
            height: 420px;
            position: absolute;
            top: 0;
            left: 0;
            background-image: linear-gradient(
                /*透明*/
                transparent,
                /*半透明*/
                rgba(0,0,0,0.5)
            );
            opacity: 0;
            /*过渡*/
            transition: all 1s;
        }
        .box:hover .mask{
            /*鼠标悬停显示渐变*/
            opacity: 1;
        }
</style>
<body>
    <div class="box">
        <img src="/images/earth.jpg">
        <div class="txt">流浪地球</div>
    <!--    添加一个盒子定位到最外层给背景图添加渐变效果-->
        <div class="mask"></div>
    </div>
</body>

二、径向渐变

在这里插入图片描述

径向渐变：颜色从中心点向四周发散，常用于给按钮添加高光效果，让按钮更加立体。

做法：
- background-image: radial-gradient
  (
  半径 to 圆心位置，
  渐变颜色1 颜色终点位置（可省略），
  渐变颜色2 颜色终点位置（可省略），
  );
半径：可以有2条，如果有两条渐变圆心则为椭圆形
圆心位置：
- 像素值
- top、right、bottom、left
- 百分比

  <style>
    div{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      /*基础写法  */
      background-image: radial-gradient(
          50px at center center,
          red,
          pink
        );
      /*两条渐变半径*/
      background-image: radial-gradient(
        50px 30px at center center,
        red,
        pink 50%
      );
      /*圆心位置为像素值  */
      background-image: radial-gradient(
           50px  at 50px 30px,
           red,
           pink 50%
      );
    }
    button{
        width: 100px;
        height: 40px;
        background-color: #00BE9A;
        border: 0;
        border-radius: 5px;
        color: #fff;
        /*高光*/
        background-image: radial-gradient(
            30px at 30px 20px,
            rgba(255,255,255,0.5),
            transparent
        );
    }
</style>
<body>
    <div></div>
    <button>按钮</button>
</body>