zoukankan      html  css  js  c++  java
  • Css3 渐变

    CSS3提供了创建颜色渐变的方式,在两个或更多的颜色之间进行平滑色过度。

    浏览器支持两种颜色渐变

      线性渐变:

        

    div{
        200px;
        heigth:100px;
        background:linear-gradient(to bottom,red,yellow)
    }
    

       to bottom:渐变的方向或角度

          1.使用关键字表示方向:left  right  top  bottom,left top、right top、、、、、、、、等

          2.用数字表示角度:取值范围0-360  单位是deg(degree的简写)

       red:第一种颜色

          1.颜色列表:两个或更多的颜色的组合,用逗号分开

          2.可以使用关键字,十六进制 RGB HSL.....等。

       yellow:第二种颜色

      径向渐变

        

    div{
        200px;
        heigth:100px;
        background:radial-gradient(aqua,blue);
    }
    

        径向渐变是从元素中心向四周放射性渐变,成椭圆形

        1.默认情况下椭圆的大小自动匹配所在元素尺寸

        2.在参数中指定渐变的形状:cirale(圆形) ellipse(椭圆形 默认)

          Background:radial-gradient(circle,aqua,blue);

    参数列表:

    radial-gradient(形状  大小  at  位置,颜色1  颜色2.......);

         1.形状:使用圆形或椭圆形

       2.大小:使用长度表示:如10px或者使用百分比:50%

       3.位置: 渐变开始的位置(默认值 center)、left、left  right  top  bottom,left top、right                              top、、、、、等

       

  • 相关阅读:
    level trigger 与 edge trigger 的区别
    使用ifstream时碰到的一个小问题
    转一篇 sed one line
    select(poll)效率,与异步网络IO,AIO, libevent, epoll
    类的成员函数指针的使用
    awk 的OFS使用 小 tips
    一句话打通所有机器,小脚本
    usleep sleep函数会重置clock 的返回值
    qstore 的 chunk重构小记
    判断质数的方法
  • 原文地址:https://www.cnblogs.com/xiaowie/p/9816041.html
Copyright © 2011-2022 走看看