码迷,mamicode.com
首页 > Web开发 > 详细

IT兄弟连 HTML5教程 CSS3属性特效 渐变3

时间:2019-11-25 09:46:03      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:ott   语法   基础上   自定义   圆心   接下来   pos   htm   垂直   

技术图片

4  径向渐变

CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。

径向渐变的格式如下:

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>,<点>…)

 

径向渐变的参数描述如表1:

表1  CSS3径向渐变参数描述

技术图片

5  径向渐变实例

虽然径向渐变要比线性渐变更为复杂,只要了解了其基本语法以及相关属性参数的作用,并不需要花太多的时间去适应。接下来,我们通过实战来加强径向渐变的使用。本节的所有例子我们都在一个宽度为400像素,高为300像素的容器中实现。

 

一、从容器内部向外径向渐变

先来看一个最简单的径向渐变,圆心都是容器正中间,从“#ffc107”颜色向“pink”颜色实现径向渐变,CSS代码如下:

技术图片

 

在浏览器中查看效果如图1所示:

技术图片

图1  简单径向渐变

 

如果你想制作一个圆形渐变,而不是一个椭圆形渐变,只需要添加一个关键词“circle”,我们在上例的基础上添加一个关键词“circle”,代码如下:

技术图片

 

此时的渐变变成了圆形,在浏览器中查看效果如图2所示:

 技术图片

图2  圆形渐变

 

正如你所看到的,圆形的渐变是一个特殊的椭圆渐变,水平半径和垂直半径具有相同的长度值。既然圆形渐变是椭圆渐变的一种特殊情况,如果我们渐变主要半径(水平半径)和次要半径(垂直半径)不相同时就是一个椭圆形渐变。正如上面所言,主要半径和次要半径不相等时,制作的径向渐变是椭圆形渐变,在制作椭圆形渐变,可以使用关键词“ellipse”。

 

二、规定径向渐变的半径

除了使用关键词制作不同的径向渐变,还可以用不同的渐变参数制作径向渐变效果,通过制作同心圆,主要半径和次要半径来决定径向渐变的形状。径向渐变的半径设为“200px,100px”。水平半径为200px,垂直半径为100px,从“#ffc107”色到“pink”色径向渐变:

技术图片

 

此时的渐变变成了水平半径为200px,垂直半径为100px的椭圆,在浏览器中查看效果如图3所示:

技术图片

图3  自定义半径的径向渐变

 

三、规定径向渐变的半径及圆心位置

除了上述方法能实现一些简单的径向渐变效果之外,还可以使用渐变形状配合圆心定位。主要使用“at”加上关键词来定义径向渐变中心位置。径向渐变中心位置类似于background-position属性。例如,圆心位置在“100px,150px”处,水平半径为200px,垂直半径为100px,从“#ffc107”色到“pink”色径向渐变:

技术图片

 

此时的渐变变成了水平半径为200px,垂直半径为100px且圆心位置在“100px 200px”处的椭圆,在浏览器中查看效果如图4所示:

 技术图片

图4  自定义半径及圆心位置的径向渐变

 

设置圆心位置除了使用特定的值外,可以使用百分比和一些关键词来定义,如“center”、“top”、“right”、“bottom”、“left”及这些关键词的组合,如“top left”、“right bottom”等,组合位置的关键词顺序可以调换。

 

四、重复的径向渐变

跟线性渐变一样,我们也可以为径向渐变设置重复。以同样的方式,可以使用相关的属性创建重复的径向渐变。其语法和linear-gradient类似,只是以一个径向渐变为基础进行重复渐变,如下例所示,我们制作一个三色重复的径向渐变:

技术图片

 

在浏览器中查看,渐变效果如图5所示:

技术图片

图5  三色重复径向渐变

 

理解了上述的几个实例后,读者就可以自己DIY渐变效果了。

IT兄弟连 HTML5教程 CSS3属性特效 渐变3

标签:ott   语法   基础上   自定义   圆心   接下来   pos   htm   垂直   

原文地址:https://www.cnblogs.com/itxdl/p/11925775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!