zoukankan      html  css  js  c++  java
  • CSS3--背景颜色的渐变效果

    一、渐变:gradients

      线性渐变(linear gradients)

        background:-webkit-linear-gradient(90deg,red 10%,blue);

          1、需要有内核前缀

          2、方向可以为字母或者角度(left top right bottom)

          3、为角度时逆时针旋转

          4、颜色值数量不限

      径向渐变(radial gradients)

        background:-webkit-radial-gradient(90deg,red 10%,blue);

          1、不接受角度参数

          2、默认为center

    二、倒影:box-reflect

        -webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(0,0,0,0)20%,rgba(0,0,0,1));

          参数:方向(above,below,left,right),距离,渐变

      background-size 背景尺寸设置  px  %

    三、背景裁切:

      background-clip

        border-box丨padding-box丨content-box

    四、背景起点位置:background-origin

        border-box丨padding-box丨content-box

    五、背景蒙板:-webkit-mask

      -webkit-mask-image:url丨gradient/*可以使用图片或渐变作为遮罩层*/

      -webkit-mask-repeat;repeat丨repeat-x丨repeat-y丨no-repeat

      -webkit-mask-position:x y;

      -webkit-mask-clip:border丨padding丨content

      -webkit-mask-origin:border丨padding丨content

  • 相关阅读:
    [Docker] Windows 宿主环境下,共享或上传文件到容器的方法
    [Docker]
    [Docker]
    [Docker]
    [Windows]
    [Linux] 树莓派 4B 安装 Ubuntu 19.10 (Eoan Ermine) IOT 版
    [Linux]
    [.Net] 什么是线程安全的并发集合
    [IOT]
    c++库大全
  • 原文地址:https://www.cnblogs.com/llz1314/p/5738658.html
Copyright © 2011-2022 走看看