CSS3径向渐变(radial-gradient)

最新推荐文章于 2024-05-08 16:09:38 发布

原创最新推荐文章于 2024-05-08 16:09:38 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #渐变

CSS3 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了CSS3中的径向渐变特性，包括不同浏览器下的兼容写法、属性参数解析、圆心定位方法及多色渐变的实现方式，并提供了实际应用场景。

1.各浏览器下渐变语法：

这里写图片描述

1.Webkit引擎的CSS3线性渐变语法与属性参数：

-webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);   //老式语法书写规则

-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);   //新式语法

2.Gecko引擎的CSS3线性渐变语法与属性参数：

-moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

3.Presto引擎的CSS3线性渐变语法与属性参数：

-o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

4.Trident引擎的CSS3线性渐变语法与属性参数：

-ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

5.W3C标准线性渐变语法与属性参数：

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

2.CSS3径向渐变的属性参数：

1. 属性参数position：用来定义径向渐变的圆心位置。默认值”center”

length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值。

2. 属性参数shape：定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”.

circle：如果size和length大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
ellipse：如果size和length大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

3. 属性参数size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词。

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

4. 属性参数color-stop：径向渐变线上的停止颜色。

径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

3.CSS3线性渐变的基本用法：

1圆形渐变（circle）和椭圆渐变(ellipse)：

椭圆渐变：主要半径（水平半径）和次要半径（垂直半径）不相同；

background-image:radial-gradient(ellipse at right,red,green);

圆形渐变：主要半径（水平半径）和次要半径（垂直半径）相同，特殊的椭圆！

background-image:radial-gradient(circle at center center,red,green);

2.渐变圆心定位：(使用关键字或百分比)

center / at 50% 50%
top / at 50% 0%
right / at 100% 50%
bottom / at 50% 100%
left / at 0% 50%
top left / at 0% 0%
top right / at 100% 0%
bottom right / at 100% 100%
bottom left / at 0% 100%

主要是以上各个圆心定位点，看图：

这里写图片描述

3.关键词设置

这里写图片描述

4.多色径向渐变：

background-image:radial-gradient(
            circle at center,
            #f28fb8,
            #e982ad,
            #ec568c);

5.应用：

可以配合字体图标、文字阴影text-shadow、盒阴影box-shadow和多背景制作炫酷圆形突变按钮

总结：主要整理了下CSS3径向渐变在各大浏览器下的兼容写法，属性参数、各个圆心定位点渐变的使用用法以及多色渐变的简要写法！