贤话师兄
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>知识整理>正文

渐变样式设置

若等贤 2018-02-26 11:54 交互样式渐变

1.什么是渐变

渐变指定是多种颜色平缓变换的一种显示效果。

2.渐变的主要因素

1.色标:一种颜色及其出现的位置
2.一个渐变是由多个色标组成(至少两个)

3.渐变分类

1.线性渐变
  以直线的方向来填充效果
2.径向渐变
  以圆形的方式来实现填充
3.重复渐变
  将线性渐变或径向渐变 重复几次实现填充

4.渐变详解

 
1.线性渐变
  属性:background-image
  取值:linear-gradient(angle,color-point1,color-point2,....);
    1.angle
  表示渐变填充的方向或角度
  取值:
    1.关键字
      to top 从下向上填充渐变色
      to bottom 从上向下填充渐变色
      to left 从右向左填充渐变色
      to right 从左向右填充渐变色
    2.角度值
     0deg 从下向上填充,等同于to top
     90deg 从左向右填充,等同于to right
     180deg 从上到下填充,等同于to bottom
     270deg 从右向左填充,等同于to left
    2.color-point
  色标:颜色 及其 位置
  取值:颜色 以及 位置的组合,中间用空格分开
  ex:
    1.red 0%
      在填充方向的开始位置处颜色为红色
    2.green 50%
      到填充方向一半的位置处,颜色变为绿色
    3.blue 200px
      到填充方向的200px的位置处,颜色变为蓝色
2.径向渐变
  属性:
  background-image:radial-gradient([size at position],
  color-point1,color-point2,...);
  size at position: 
      size:半径,以px为单位的数值
  position:圆心所在位置
       1.x y 具体数值
       2.x% y% 元素宽和高的占比
       3.关键字
         x:left,center,right
     y:top,center,bottom
  ex:
    100px at right top 
半径     右上角位置
3.重复渐变
  1.重复线性渐变
    background-image:repeating-linear-gradient
    (angle,color-point1,color-point2,...);
color-point:位置一定要给绝对数值(px),不要用相对单位%
  2.重复径向渐变
    background-image:repeating-radial-gradient
    ([size at position],color-point1,color-point2,...);

本文链接:https://blog.weguiding.com/web/bj_265.html