CSS3 渐变 — 径向渐变

HTML5学堂(码匠):有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变,两者的实现方法大同小异,但CSS3的径向渐变比线性渐变稍微复杂些,颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合,属性参数也繁多复杂,不过别担心,下面会为大家详细介绍。

本文主要内容

1. 径向渐变简介

2. 径向渐变属性与参数

3. 径向渐变基本用法

1、径向渐变简介

CSS3径向渐变,是一种从起点到终点颜色从内到外进行圆形渐变,就像从中间点向四周方向拉伸一样。CSS3径向渐变不再像线性渐变那样沿着一条直线进行过度,而是以圆形或椭圆形进行渐变是圆形或椭圆形渐变,是从一个起点向所有方向渐变。

2、径向渐变属性与参数

  1. radial-gradient(position, shape size, start-color, stop-color)

position:定义圆心位置;

shape size:由2个参数组成,前者shape定义圆形或椭圆形,后者size定义大小;

start-color:设置开始的颜色;

stop-color:设置结束的颜色;

position、shape size可选可不选,如果没有进行设置,表示该参数采用默认值。

start-color和stop-color为必须设置的参数,并且径向渐变同线性渐变一样可以设置多种颜色。

3、径向渐变基本用法

3.1 定义圆心位置position

position用于定义径向渐变的圆心位置,属性值跟background-position属性值相似。可以通过px、em、百分比设置,也可以使用关键字设置,这一点与线性渐变的设置方式是一致的,如:top上方、top-right右上方等等。如下示例:

  1. <style type="text/css">
  2. div {
  3. width: 200px;
  4. height: 150px;
  5. color: #fff;
  6. line-height: 150px;
  7. text-align: center;
  8. }
  9. .radial{
  10. margin-bottom:10px;
  11. background:-webkit-radial-gradient(#fff, #39f);
  12. }
  13. .radial-a{
  14. background:-webkit-radial-gradient(top, #fff, #39f);
  15. }
  16. </style>
  17. <body>
  18. <div class="radial"></div>
  19. <!-- 定义圆心位置 -->
  20. <div class="radial-a"></div>
  21. </body>

效果如下:

3.2 定义形状shape与定义大小size

shape取值:cricle 将径向渐变为圆形 | ellipse 将径向渐变为椭圆形

  1. .raidal-circle {
  2. background:-webkit-radial-gradient(circle,#000,#fff);
  3. }
  4. .raidal-ellipse {
  5. background:-webkit-radial-gradient(ellipse,#000,#fff);
  6. }

效果如下:

定义大小size

size主要用于定义径向渐变的结束形状大小。

closet-side 指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角

  1. .raidal-closest-side {
  2. background:-webkit-radial-gradient(circle closest-side,#000,#fff);
  3. }
  4. .raidal-closest-corner {
  5. background:-webkit-radial-gradient(circle closest-corner,#000,#fff);
  6. }
  7. .raidal-farthest-side {
  8. background:-webkit-radial-gradient(circle farthest-side,#000,#fff);
  9. }
  10. .raidal-farthest-corner {
  11. background:-webkit-radial-gradient(circle farthest-corner,#000,#fff);
  12. }

效果如下:

3.3 开始颜色start-color和结束颜色stop-color

start-color设置开始颜色

stop-color设置结束颜色。

颜色可以为关键词、十六进制颜色值、RGBA颜色值等。径向渐变也接受一个颜色值列表,用于同时定义多种颜色的径向渐变。

  1. .raidal-start-end {
  2. background:-webkit-radial-gradient(red,orange,yellow,green,blue);
  3. }

效果如下:

默认情况下,径向渐变颜色节点是均匀分布的,不过我们也可以为每一种颜色添加百分比来控制颜色的分步,方法与线性渐变相同。

  1. .raidal-start-end-a {
  2. background:-webkit-radial-gradient(red 4%,orange 46%,yellow 5%,green 20%,blue);
  3. }

效果如下:

小结

为了方便学习,建议使用主流浏览器进行demo书写,这样可以避免书写大量的兼容代码,但是在实际开发中,为了兼容,各个浏览器的前缀是必须考虑的。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-01-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏calmound

POJ A Knight's Journey

题意:给你一定的格子的棋盘,一匹马是否可以遍历完全整个棋盘 1 #include<stdio.h> 2 #include<string.h> 3 cons...

34110
来自专栏数据结构与算法

1002. 三角形 (

题目描述 输入三角形三边长a,b,c(保证能构成三角形),输出三角形面积。 输入 一行三个用一个空格隔开的实数a,b,c,表示三角形的三条边长。 输出 输出三角...

2786
来自专栏柠檬先生

SVG 使用

SVG即Scalable Vector Graphics可缩放矢量图形,使用XML格式定义图形, 主要优势在于可缩放的同时不会影响图片的质量。 SVG 在htm...

1899
来自专栏漫漫深度学习路

tensorflow学习笔记(三十九):双向rnn

tensorflow 双向 rnn 如何在tensorflow中实现双向rnn 单层双向rnn ? 单层双向rnn (cs224d) tensorfl...

4695
来自专栏老马寒门IT

02-移动端开发教程-CSS3新特性(中)

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

2050
来自专栏calmound

图的着色

图着色问题,相邻的点颜色不同       基础知识:http://wenku.baidu.com/view/d7242fd1c1c708a1284a444d.h...

2557
来自专栏杂七杂八

Matplotlib 绘2D图

Matplotlib 是一个非常简单而又完善的开源绘图库。那么它到底有多简单呢? 基本知识 首先官方文档奉上 下面,我们通过 3 行代码绘制一张简单的折线图...

4075
来自专栏数据结构与算法

P2513 [HAOI2009]逆序对数列

题目描述 对于一个数列{ai},如果有i<j且ai>aj,那么我们称ai与aj为一对逆序对数。若对于任意一个由1~n自然数组成的数列,可以很容易求出有多少个逆序...

2638
来自专栏ml

nyoj-----幸运三角形

幸运三角形 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述         话说有这么一个图形,只有两种符号组成(‘+’或者‘-’...

28210
来自专栏窗户

RSA简介(二)——模幂算法

  RSA最终加密、解密都要用到模乘的幂运算,简称模幂运算。   回忆一下RSA,从明文A到密文B   B=Ae1%N   对B解密回到明文A,就是   A=B...

1728

扫描关注云+社区