美文网首页你是代码,你最大
css3实现3种类型渐变——圆锥渐变

css3实现3种类型渐变——圆锥渐变

作者: Promise_Irene | 来源:发表于2019-11-18 16:39 被阅读0次

首先看一下css3有提供哪三种类型的渐变:

linear-gradient : 线性渐变

线性渐变
语法

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


/*线性渐变 - 从上到下(默认情况下)*/
#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

/*线性渐变 - 从左到右*/
#grad {
    height: 200px;
    background-image: linear-gradient(to right, red , yellow);
}

/*线性渐变 - 对角*/
#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}
  • 使用角度
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}
  • 使用多个颜色结点
#grad {
  /* 标准的语法 */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
  • 使用透明度
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
  • 重复的线性渐变
#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

linear-gradient : 径向渐变

径向渐变
语法

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


/* 径向渐变 - 颜色结点均匀分布(默认情况下) */
#grad {
  background-image: radial-gradient(red, yellow, green);
}

/* 径向渐变 - 颜色结点不均匀分布 */
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

/* 径向渐变 - 颜色结点均匀分布(默认情况下) */
#grad {
  background-image: radial-gradient(red, yellow, green);
}
  • 设置形状
    shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}
  • 不同尺寸大小关键字的使用
    size 参数定义了渐变的大小。它可以是以下四个值:
    closest-side、farthest-side、closest-corner、farthest-corner
#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
  • 重复的径向渐变
#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

conic-gradient: 圆锥渐变

圆锥渐变
.cir{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}
饼图
.cir{
    width:200px;
    height:200px;
    margin:50px auto;
    background: conic-gradient(deeppink 0,deeppink 30%,yellowgreen 30%,yellowgreen 70%,teal 70%,teal 100%);
    border-radius:50%;
}

菜鸟https://www.runoob.com/css3/css3-gradients.html
conic-gradient圆锥渐变详情https://www.imooc.com/article/27841

相关文章

  • css3实现3种类型渐变——圆锥渐变

    首先看一下css3有提供哪三种类型的渐变: linear-gradient : 线性渐变 语法 backgroun...

  • 细说css的渐变属性(conic-gradient+linear

    实现效果 1.什么是conic-gradient(圆锥渐变) conic-gradient是圆锥渐变,以一个点为中...

  • css3渐变:线性和径向

    知识点: CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变 渐变(gradients)可以在两个...

  • css3渐变属性有哪些?CSS3渐变属性用法

    在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现。而CSS3中增加了渐变属性,通过渐变属性可以轻松实现...

  • CSS3渐变效果

    CSS3 定义了两种类型的渐变(gradients): 线性渐变(Linear Gradients)- 向下/向上...

  • 渐变色彩

    CSS3 Gradient分为线性渐变(liner)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不...

  • CSS渐变

    CSS 渐变 是在 CSS3 Image Module 中新增加的 类型from MDN 线性渐变 line...

  • css3 渐变/过渡/动画

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡 渐变类型: 1)线性渐变(L...

  • CSS3渐变知识梳理

    CSS3渐变的两种类型 1.线性渐变(Linear Gradient)1.1 两种颜色 1.2多种颜色渐变 2.径...

  • CSS3渐变的使用方法:

    CSS3渐变的使用方法: css3的渐变分为两种,下面进行依次的讲解:.线性渐变. .径向渐变. *1.线性渐变 ...

网友评论

    本文标题:css3实现3种类型渐变——圆锥渐变

    本文链接:https://www.haomeiwen.com/subject/bhdbictx.html