css3的颜色模式和线性渐变

最新推荐文章于 2022-08-25 14:42:24 发布

bug的生产者

最新推荐文章于 2022-08-25 14:42:24 发布

阅读量240

点赞数 1

分类专栏： css效果

本文链接：https://blog.csdn.net/qq_43209768/article/details/100085962

版权

css效果专栏收录该内容

11 篇文章 0 订阅

订阅专栏

来源于技术胖的视频总结
1.rgba(R,G,B,A)
R:红色值。正整数（0-255）| 百分数
G:绿色值。正整数（0-255）| 百分数
B.蓝色值。正整数（0-255）| 百分数
A.Alpha透明度。0-1
2.hsla(H,S,L,A)
H.Hue（色调）。0（360）表示红色；120（绿色）；240（蓝色）；可以取其它数值来指定颜色，取值为（0-360）
S:Saturation（饱和度）。（0%-100%）
L:Lightness（亮度）。（0%-100%）
A:Aplha（透明度）。（0-1）
3.线性渐变
linear-gradient([<point>||<angle>,]?<stop>,<stop>[,stop>]*)
<angle>:用角度值指定渐变的方向
to left:设置渐变为从左到右（270deg）
to right:设置渐变为从右到左（90deg）
to top:设置渐变为从下到上（0deg）
to bottom:设置渐变为从上到下（180deg）
<color-stop>:用于指定渐变的起止颜色
<color>:指定颜色
<length>:用长度值指定起止色位置，不允许负值
<percentage>:用百分比指定起止色位置
在这里插入图片描述

   .demo {
        width: 350px;
        height: 300px;
        position: relative;
        border:1px solid black;
        background-image: linear-gradient(to left,red,pink)
      }

前面50%不渐变，从50%之后开始渐变
在这里插入图片描述

      .demo {
        width: 350px;
        height: 300px;
        position: relative;
        border:1px solid black;
        background-image: linear-gradient(to left,red 50%,pink 100%)
      }

可以设置多个颜色
在这里插入图片描述

      .demo {
        width: 350px;
        height: 300px;
        position: relative;
        border:1px solid black;
        background-image: linear-gradient(to left,red,purple,pink)
      }

在这里插入图片描述

   .demo {
        width: 300px;
        height: 300px;
        position: relative;
        border:1px solid black;
        background-image: linear-gradient(to left,red 100px,purple 200px,pink 300px);
        background-image: -webkit-linear-gradient(to left,red 100px,purple 200px,pink 300px);
        background-image: -o-linear-gradient(to left,red 100px,purple 200px,pink 300px);
      }
      /* 前面30%不渐变，从30%开始从红色向紫色渐变，当达到60%的时候，紫色是不渐变的，从60%开始，紫色向粉红色渐变，粉红色渐变到100%结束,可以写百分比，也可以写数值（background-image: linear-gradient(to left,red 100px,purple 200px,pink 300px)）由于存在浏览器兼容，所以要加前缀 */

** 4.径向渐变**
background-image: radial-gradient(center, shape size, start-color, ..., last-color);

在这里插入图片描述

 <style>
      .demo {
        width: 200px;
        height: 200px;
        position: relative;
        border:1px solid black;
        margin:20px;
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
      }
      .circle{
          background-image: radial-gradient(red,blue)
      }
      .ellipse{
        background-image: radial-gradient(ellipse at center,red,blue)
      }
    </style>
  </head>
  <body>
    <div class="demo circle">圆形渐变</div>
    <div class="demo ellipse">椭圆渐变</div>
  </body>

从右侧开始渐变
在这里插入图片描述

      .circle{
          background-image: radial-gradient(circle at right,red,blue)
      }
      .ellipse{
        background-image: radial-gradient(ellipse at right,red,blue)
      }

从头部开始
在这里插入图片描述

      .circle{
          background-image: radial-gradient(circle at top,red,blue)
      }
      .ellipse{
        background-image: radial-gradient(ellipse at top,red,blue)
      }

从右上角开始渐变
在这里插入图片描述

      .circle{
          background-image: radial-gradient(circle at top left,red,blue)
      }
      .ellipse{
        background-image: radial-gradient(ellipse at top left,red,blue)
      }

丑丑的渐变
在这里插入图片描述

      .circle{
          background-image: radial-gradient( 50px circle at center,red,blue)
      }
      .ellipse{
        background-image: radial-gradient(50px 30px ellipse at center,red,blue)
      }

** 5.重复性渐变**
在这里插入图片描述

    <style>
      .linear {
        width: 200px;
        height: 200px;
        border:1px solid black;
        margin:20px;
        background-image: repeating-linear-gradient(yellow 30px,pink 60px)
      }
      .circle {
        width: 200px;
        height: 200px;
        border:1px solid black;
        border-radius: 50%;
        margin:20px;
        background-image: repeating-radial-gradient(yellow 30px,pink 60px)
      }
    </style>
  </head>
  <body>
    <div class="linear"></div>
    <div class="circle"></div>
  </body>

bug的生产者

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3的颜色模式和线性渐变

来源于技术胖的视频总结1.rgba(R,G,B,A)R:红色值。正整数（0-255）| 百分数G:绿色值。正整数（0-255）| 百分数B.蓝色值。正整数（0-255）| 百分数A.Alpha透明度。0-12.hsla(H,S,L,A)H.Hue（色调）。0（360）表示红色；120（绿色）；240（蓝色）；可以取其它数值来指定颜色，取值为（0-360）S:Saturation（饱...
复制链接

扫一扫

专栏目录