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

  • 相关阅读:
    文件处理
    基本数据类型
    Python简介和入门
    了解计算机的发展历程
    工具类(MailUtils)发邮件
    文件上传和下载
    JavaWeb过滤器
    JavaWeb监听器
    JavaWeb的分页
    JdbcUtils(内部使用c3p0得到连接池对象datasource)的第三次修改---完成事务的处理
  • 原文地址:https://www.cnblogs.com/llz1314/p/5738658.html
Copyright © 2011-2022 走看看