css中radial-gradient()有什么用

发布时间:2022-03-05 11:09:24 作者:小新
来源:亿速云 阅读:101

这篇文章主要介绍了css中radial-gradient()有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

  在css中可以定义两种类型的渐变(gradients):

  1、线性渐变(LinearGradients)-向下/向上/向左/向右/对角方向

  2、径向渐变(RadialGradients)-由它们的中心定义

  我们在之前的文章【css中linear-gradient()可以干什么?linear-gradient()详解】中已经介绍了线性渐变linear-gradient()属性的使用,在此就不在介绍了。下面我们来详细看看径向渐变--radial-gradient()属性的使用。

  在径向渐变中,颜色不是如同线性渐变那样从渐变盒的一侧平滑地褪色到另一侧,它们反而是从单个点出现并且以圆形或椭圆形状平滑地向外扩展的。

  radial-gradient()是通过指示渐变的中心(0%的椭圆将会在哪里)和结束形状(100%的椭圆)的大小和形状来指定径向渐变。颜色停止被作为一个列表给出,这和linear-gradient()是一样的。从渐变中心开始,朝向(并且可能超越)结束形状前进,根据指定的颜色停止绘制和着色均匀缩放的同心椭圆。

  radial-gradient()属性的基本语法

  径向渐变语法是:

  radial-gradient([<ending-shape>||<size>][at<position>],<color-stop-list>)

  举个例子:

  background:radial-gradient(5emcircleattopleft,yellow,blue)

  定义了一个5em宽的圆形径向渐变,其中心位于左上角。

  1.jpg

  参数分析如下:

  <position>:

  确定渐变的中心,可以省略,但如果省略此参数,则默认为居中。

  <ending-shape>:

  可以设置circle(圆形)或ellipse(椭圆形)两个值;确定渐变的结束形状分别是圆形还是椭圆形,可以省略。

  <size>:

  确定渐变的结束形状的大小。如果省略,则默认为“farthest-corner”。它可以明确地通过关键字给出。出于关键字定义的目的,请将渐变框边缘视为在两个方向上无限延伸,而不是有限线段。

  如果结束形状是椭圆形,则其轴与水平轴和垂直轴对齐。

  当定义为圆和椭圆的渐变时接受以下关键字作为其<size>参数值:

  closest-side:该结束形状的尺寸使得它恰好符合的侧渐变框最接近渐变的中心。如果形状是椭圆形,则它恰好与每个尺寸中最近的一侧相交。

  farthest-side:与closest-side相同,除了最终形状的大小基于最远的一侧。

  closest-corner:该结束形状的尺寸使得它穿过的角落渐变框最接近渐变的中心。如果形状是椭圆形,则给出的结束形状具有与指定最近侧时相同的纵横比。

  farthest-corner:与closest-corner相同,除了最终形状的大小基于最远的角。如果形状是椭圆形,则结束形状的宽高比与指定最远侧时的宽高比相同。

  注:

  1、如果<ending-shape>被指定为“circle”或被省略,则<size>可以明确地给出:

  <length>:明确给出圆的半径,负值无效。

  百分比在这里是不被允许的;它们只能用于指定椭圆渐变的大小,而不是圆形渐变的大小。

  2、如果将<ending-shape>被指定为“ellipse”或被省略,则可以将<size>明确指定为:

  <length-percentage>{2}:

  明确给出椭圆的大小。第一个值表示水平半径,第二个值表示垂直半径。百分比值相对于渐变框的相应维度。负值无效。

  径向渐变示例

  示例一:指定基本径向渐变的不同方法

  radial-gradient(yellow,green);

  radial-gradient(ellipseatcenter,yellow0%,green100%);

  radial-gradient(farthest-cornerat50%50%,yellow,green);

感谢你能够认真阅读完这篇文章,希望小编分享的“css中radial-gradient()有什么用”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. html是如何实现自动清理js、css文件缓存的
  2. 如何使用html+css+js实现弹球游戏

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css radial-gradient()

上一篇:css中nth-child()的作用是什么

下一篇:ajaxError()有什么作用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》