HTML(27)——渐变

渐变是多个颜色逐渐变化的效果,一般用于设置盒子模型

线性渐变

属性:background-image : linear-gradient(

渐变方向

颜色1 终点位置,

颜色2 终点位置,

......);

 取值:

渐变方向:可选

  • to 方位名词
  • 角度度数

终点位置:可选

  • 百分比
    div {
      width: 250px;
      height: 250px;
      background-color: aqua;
      background-image: linear-gradient(
          rgb(36, 151, 227) 80%,
          red);
    }

 径向渐变

属性:

background-image: radial-gradient(

半径 at 圆心位置,

颜色1 终点位置,

颜色2 终点位置,

......

);

 取值

  • 半径可以是两条,则为椭圆型的渐变
  • 圆心位置取值:像素单位数值/百分比/方位名词
    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      border-radius: 50%;
      background-image: radial-gradient(
          100px at center center,
          red,
          blue);
    }

上一篇:iOS 开发者的 Flutter 入门课


下一篇:致远OA同步组织架构到企业微信