栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

CSS3 渐变(Gradients)之CSS3 径向渐变

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

径向渐变由它的中心定义。为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
 
语法background: radial-gradient(center, shape size, start-color, ..., last-color);
 
(1)、径向渐变 - 颜色结点均匀分布(默认情况下)

XML/HTML Code复制内容到剪贴板
  1.   
  2.   
  3.   
  4.   
  5.   
  6.   
  7. 径向渐变 - 颜色结点均匀分布

      
  
  • 注意: Internet Explorer 9 及之前的版本不支持渐变。

      
  •   
  •   
  •  

    (2)、径向渐变 - 颜色结点不均匀分布

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.   
    5.   
    6.   
    7. 径向渐变 - 颜色结点不均匀分布

        
      
  • 注意: Internet Explorer 9 及之前的版本不支持渐变。

      
  •   
  •   
  • (3)、设置形状
     
    shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.   
    5.   
    6.   
    7.     
    8. 径向渐变 - 形状

        
    9. 椭圆形 Ellipse(默认):

        
      
  • 圆形 Circle:

      
  •   
  • 注意: Internet Explorer 9 及之前的版本不支持渐变。

      
  •   
  •   
  •  (4)、不同尺寸大小关键字的使用
     
    size 参数定义了渐变的大小。它可以是以下四个值:closest-side、farthest-side、closest-corner、farthest-corner
     
    (5)、重复的径向渐变
     
    repeating-radial-gradient() 函数用于重复径向渐变

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.   
    5.   
    6.   
    7. 重复的径向渐变

        
    8.   
    9. 注意: Internet Explorer 9 及之前的版本不支持渐变。

        
    10.   
    11.   

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/217699.html

    CSS教程相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号