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、、、、、等

       

  • 相关阅读:
    杂记
    [POI2015]PUS
    CF786B Legacy(线段树优化建图)
    SP11470 TTM
    [WC2010]重建计划
    [HNOI2014]世界树
    luogu P4842 城市旅行
    [SDOI2016]征途
    [APIO2014]序列分割
    上下界网络流构图证明
  • 原文地址:https://www.cnblogs.com/xiaowie/p/9816041.html
Copyright © 2011-2022 走看看