HTML(27)——渐变

A阳俊yi2024-07-11 0:40

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

线性渐变

属性：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);
  }