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;
    }

  • 相关阅读:
    关于故事和段子
    SQLserver2008数据库备份和还原问题(还原是必须有完整备份)
    百度文库破解方法
    如何识别病毒,转自百度文库,千辛万苦破解出来的
    20个人艰不拆的事实:知道真相的我眼泪掉下来 T.T
    linux学习网站分享
    个人对于腾讯和优酷的看法
    今天去客户现场的一些感想
    基于 Blazui 的 Blazor 后台管理模板 Blazui.Admin 正式尝鲜
    新手福利!Blazor 从入门到砖家系列教程(你真的可以成为砖家)
  • 原文地址:https://www.cnblogs.com/Akishimo/p/2840999.html
Copyright © 2011-2022 走看看