zoukankan      html  css  js  c++  java
  • 【转】CSS3 渐变背景 radialgradient() webkitradialgradient() webkitgradient() mozradialgradient() oradialgradient() msradialgradient()

    语法:

    <radial-gradient>:radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

    <position>:[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

    <shape>:circle | ellipse

    <size>:closest-side | closest-corner | farthest-side | farthest-corner | contain | cover

    <shape-size>:<length> | <percentage> 

    <color-stop>:<color> [ <length> | <percentage> ]?

     

     


    取值:

     


    <position>
    <percentage>①:
    用百分比指定径向渐变圆心的横坐标值。可以为负值。
    <length>①:
    用长度值指定径向渐变圆心的横坐标值。可以为负值。
    left:
    设置左边为径向渐变圆心的横坐标值。
    center①:
    设置中间为径向渐变圆心的横坐标值。
    right:
    设置右边为径向渐变圆心的横坐标值。
    <percentage>②:
    用百分比指定径向渐变圆心的纵坐标值。可以为负值。
    <length>②:
    用长度值指定径向渐变圆心的纵坐标值。可以为负值。
    top:
    设置顶部为径向渐变圆心的纵坐标值。
    center②:
    设置中间为径向渐变圆心的纵坐标值。
    bottom:
    设置底部为径向渐变圆心的纵坐标值。
    <color-stop>:
    指定渐变的起止颜色。
    <shape>
    circle:
    指定圆形的径向渐变
    ellipse:
    指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值
    <size>
    closest-side:
    指定径向渐变的半径长度为从圆心到离圆心最近的边
    closest-corner:
    指定径向渐变的半径长度为从圆心到离圆心最近的角
    farthest-side:
    指定径向渐变的半径长度为从圆心到离圆心最远的边
    farthest-corner:
    指定径向渐变的半径长度为从圆心到离圆心最远的角
    contain:
    包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
    cover:
    覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner
    <shape-size>
    写本文档时Firefox尚不支持<shape-size> 
    <percentage>:
    用百分比指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
    <length>:
    用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
    <color-stop>
    <color>:
    指定颜色。请参阅颜色值
    <length>:
    用长度值指定起止色位置。不允许负值
    <percentage>:
    用百分比指定起止色位置。

     

     

    写法:

     

    内核类型                       写法
    Webkit(Chrome/Safari)    -webkit-radial-gradient()/-webkit-gradient()
    Gecko(Firefox)           -moz-radial-gradient()
    Presto(Opera)            -o-radial-gradient()
    Trident(IE)              -ms-radial-gradient()
    W3C                      radial-gradient()

     

    实例:

     

    .test{

        background:-moz-radial-gradient(center center,circle,#f00,#ff0,#080);

        background:-webkit-radial-gradient(center center,circle,#f00,#ff0,#080);

        background:-o-radial-gradient(center center,circle,#f00,#ff0,#080);

        background:-ms-radial-gradient(center center,circle,#f00,#ff0,#080);

        background:radial-gradient(center center,circle,#f00,#ff0,#080);

    }

    图1

     


    .test{

        background:-moz-radial-gradient(circle contain,#f00,#ff0,#080);

        background:-webkit-radial-gradient(circle contain,#f00,#ff0,#080);

        background:-o-radial-gradient(circle contain,#f00,#ff0,#080);

        background:-ms-radial-gradient(circle contain,#f00,#ff0,#080);

        background:radial-gradient(circle contain,#f00,#ff0,#080);

    }

     

    图2


    .test{

        background:-moz-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

        background:-webkit-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

        background:-o-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

        background:-ms-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

        background:radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

    }

    图3

     

     


    .test{

        background:-moz-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

        background:-webkit-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

        background:-o-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

        background:-ms-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

        background:radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

    }

    图4

     

     

     

     

     

     

     

     

     

    #header,.mySearch,#ad_under_post_holder,#ad_text_under_commentbox,#site_nav_under{
    display:none;
    }
    .akishimo{
    margin-top:20px;
    float:left;
    }
    .flag{
    margin-top:15px;
    float:left;

    }
    .day{
    900px;
    margin:auto;
    }
    .post,#comment_form_container{
    900px;
    margin:auto;
    }

  • 相关阅读:
    如何在Ubuntu Server 18.04上安装Microsoft的Procmon
    如何在Ubuntu 20.04上安装Wine 5.0
    如何在Kali Linux 2020中启用SSH服务
    如何在Ubuntu 20.04 LTS Focal Fossa上安装Apache Groovy
    如何使用命令在Ubuntu 20.04 Linux上安装Vmware Tools
    在Ubuntu 20.04 LTS Focal Fossa上安装Zabbix Agent
    hdu 2089 不要62
    hdu 2093 成绩排名
    hdu 2104 hide handkerchief
    leetcode147对链表进行插入排序
  • 原文地址:https://www.cnblogs.com/Akishimo/p/2840999.html
Copyright © 2011-2022 走看看