css背景颜色之颜色渐变

颜色渐变(这是background的一个属性)

  • background: linear-gradient(方向,开始颜色 位置,颜色2 位置,颜色3 位置……)
    • 沿着某条直线朝一个方向产生渐变效果
    • 参数设置
      • 方向参数
        • 设置的是线性渐变的方向
        • 取值可以取to top / to right / to bottom / to left
        • 也可以取0deg / 90deg / 180deg / 270deg
        • 默认值是 to bottom (270deg)
      • 位置参数
        • 设置百分比
  • background: radial-gradient(形状 大小 坐标,颜色1 位置,颜色2 位置)
    • 从一个中心点向四周产生渐变效果
    • 参数设置
      • 形状参数
        • circle 产生正方形的渐变色
        • ellipse 适配当前的形状,如果是正方形的容器,那么会和circle效果一样
      • 大小参数
        • closest-side 最近边
        • farthest-side 最远变
        • closest-corner 最近角
        • farther-corner 最远角 (默认)
      • 坐标参数
        • 设置中心点的位置
        • at center center 默认的显示形式,还有其他关键字left right top bottom
        • at 1px 2px 设置具体坐标值,此坐标值是距离左边边距1px,距离上边边距2px的地方
  • background: repeating-linear-gradient
    • 重复渐变
  • background: repeating-radial-gradient
    • 重复渐变

你可能感兴趣的:(html)