CSS渐变

无知的小菜鸡

已于 2022-04-08 15:04:12 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS 文章标签： css 前端 css3

于 2022-01-07 10:38:48 首次发布

本文链接：https://blog.csdn.net/weixin_41897680/article/details/122357130

HTML+CSS 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了CSS中的线性渐变、径向渐变和圆锥形渐变的语法、实例及应用场景，包括背景渐变、文字渐变、模拟阴影、饼图效果等。通过实例展示了如何利用渐变实现各种创意效果，如条纹、立体阴影和圆环进度图等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

CSS渐变包括线性渐变、径向渐变、圆锥形渐变，这篇文章简单记录一下对渐变的学习，同时给出一些例子和优秀文章

这两个渐变主要是用在background-image 中实现背景的渐变，两种渐变都支持多组渐变的叠加

线性渐变

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction ：线性渐变的方向，默认从上到下，常用值有：to bottom（从上往下） 、to top（从下往上） 、to bottom right（从左上到右下） 等
color-stopn ：渐变的颜色值，颜色值后面可以加上一个百分比的值，表示这个颜色中心线的位置或者用px之类的

background-image: linear-gradient(angle, color-stop1, color-stop2);

除了使用预定义的方向，也可以定义一个角度

 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

渐变还支持重复渐变

实例

从左到右实现渐变

.main {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, red 10%, yellow 90%);
}

在这里插入图片描述
上面表示 red中心线是10%的位置，yellow中心线是90%的位置；0~10%是red，10%~90%是red和yellow，90%~100%是yellow

基于线性渐变实现文字渐变

代码及原理：css文字效果

线性渐变模拟长阴影

参考文章：线性渐变模拟长阴影

原理

借助before和 after 两个伪元素生成两个侧面
通过线性渐变来填充伪元素，形成阴影

先做两个面

//顶部的平面
.top{
    width: 120px;
    height: 120px;
    background: #fff;
    position: relative;

    //前面的面
    &::before{
        content: 'before';
        width: 122px;
        height: 120px;
        background: #81CCEE;

        //调整一些位置，必须加上定位
        position: absolute;
        //通过平移和倾斜，来调整位置
        transform: translateY(120px) skewX(45deg) translateX(58px);
    }
}

在这里插入图片描述
右侧那个面同理

通过线性渐变实现阴影，完整代码

<template>
    <div class="main">
        <div class="top"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {}
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: #03A3ED;
}

//顶部的平面
.top{
    width: 120px;
    height: 120px;
    background: #fff;
    position: relative;

    //前面的面
    &::before{
        content: '';
        width: 122px;
        height: 120px;

        //调整一些位置，必须加上定位
        position: absolute;
        //通过平移和倾斜，来调整位置
        transform: translateY(120px) skewX(45deg) translateX(58px);

        //渐变
        background: linear-gradient(90deg, rgba(0, 0, 0,0.3), transparent);
    }

    //右侧的面
    &::after{
        content: '';
        width: 122px;
        height: 120px;
        position: absolute;
        transform: translateX(120px) skewY(45deg) translateY(63px);
        background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
    }
}
</style>

在这里插入图片描述
跟实例有不小差别，看着没人家的舒服😂

线性渐变配合阴影实现条纹立体阴影条纹字

代码及原理：css文字效果

线性渐变线条 border 效果

效果地址：线性渐变线条 border 效果

网格

<div class="main"></div>

.main {
  width: 100%;
  height: 100%;
  background: #FEFAE2;

  position: relative;

  &::before{
      position: absolute;
      width: 100%;
      height: 100%;
      content: '';
      background: -webkit-linear-gradient(top, transparent 40px, #ddd 42px),
      -webkit-linear-gradient(left, transparent 40px, #ddd 42px);
      background-size: 42px 42px;
  }
}

在这里插入图片描述

径向渐变

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape ：形状，有circle （圆）、ellipse（椭圆） ，不用这两个值的话也可以用半径来代替，一个半径是圆，两个半径是椭圆
size：大小，值有closest-side（最近的边） 、farthest-side（最远的边）、closest-corner（最近的角）、farthest-corner（最远的角）
at position：圆心的位置，默认是center（中心点），其他值有left 、top right 或者写两个点的位置，比如 0px 0px
start-color：渐变颜色，至少定义两种颜色，同线性渐变一样支持百分比或者px等设置中心线位置

实例

通过径向渐变实现一个内切角

.item1 {
  width: 100%;
  height: calc(50% - 10px);
  margin-bottom: 10px;
  background-image:radial-gradient(50px at left top,transparent 50%,blue 50%);
}

50px是半径，表示是圆；大小可以省略；位置是左上角；渐变从透明到蓝色

在这里插入图片描述
通过径向渐变实现多个内切角

.item2 {
  width: 100%;
  height: calc(50% - 10px);
  background-image: radial-gradient(50px at left top,transparent 50%,blue 50%),
  radial-gradient(50px at right top,transparent 50%,blue 50%),
  radial-gradient(50px at left bottom,transparent 50%,blue 50%),
  radial-gradient(50px at right bottom,transparent 50%,blue 50%);
  background-position: left top,right top,left bottom , right bottom;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

多个内切角的话需要注意：多个颜色渐变叠加时角会被覆盖，所以必须加上background-position、background-size、 background-repeat ；背景的位置要和渐变的位置一致，背景大小也要设置的小一点，背景设置为不重复
在这里插入图片描述
径向渐变实现优惠券波浪造型

效果地址：径向渐变实现优惠券波浪造型

径向渐变实现舞台灯光聚焦效果

效果地址：径向渐变实现舞台灯光聚焦效果

圆锥渐变

圆锥渐变的起始点是图形中心，渐变方向以顺时针方向绕中心旋转实现渐变效果。
备注：有些浏览器可能不支持

基础语法

background: conic-gradient(颜色1, 颜色2,....); // basic demo

实例

background-image: conic-gradient(red,blue);

在这里插入图片描述
可以看出从12点方向开始，按照顺时针的属性实现渐变，比例会按照颜色值的个数平分

高级用法

可以设置起始角度，圆心位置，每种颜色的中心线位置（中心线在线性渐变里提到过）

备注：起始角度和圆心可以省略，默认就是中心点和12点位置

background: conic-gradient(from 60deg at 20% 20%, green 40%, orange 40%);

在这里插入图片描述

实例

饼图

  .main{
    width: 100%;
    height: 100%;
    //裁剪出一个圆形
   // clip-path: circle(30% at 50% 50%);
    background-image: conic-gradient(red 0%, red 30% , yellow 30% ,yellow 70% , blue 70%, blue 100%)
  }

简单说一下原理，看下面这个未裁剪的图，主要是用到了中心线这个知识
red 0%, red 30% 这个表示 0%的左右两侧是红色，30%的左右两侧是红色，这样就保证了0%~30%这个区间是红色，又因为后面的颜色值会覆盖前面的颜色值，所以最终效果如下图

未裁剪的图
裁剪后的图

边框效果

还是基于上面的饼图例子，加上一个动画
原理：外圈跟上面的饼图一样，就是加了个旋转动画；内圈盒子的大小和外圈盒子的大小一样，内圈再裁剪出一个圆，加上个背景颜色就好了

<!-- 外圈 -->
<div class="main">
    <!-- 内圈 -->
    <div class="center"></div>
</div>

//外圈
.main {
  width: 100%;
  height: 100%;
  position: relative;

  clip-path: circle(30% at 50% 50%);
  background-image: conic-gradient(
    red 0%,
    red 30%,
    yellow 30%,
    yellow 70%,
    blue 70%,
    blue 100%
  );

  animation: move 3s infinite linear;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

//内圈
.center {
  width: 100%;
  height: 100%;
  position: absolute;
  background: black;
  clip-path: circle(25% at 50% 50%);
}