本篇文章给大家介绍的是css中radial-gradient()是什么？radial-gradient()的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
在css中我们可以通过设置渐变（gradients）来实现两个或多个指定的颜色之间显示的平稳过渡。且因为渐变（gradient）是由浏览器生成的，所以渐变效果的元素在放大时看起来效果更好。【相关视频推荐：css3教程】
在css中可以定义两种类型的渐变（gradients）：
1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
2、径向渐变（Radial Gradients）- 由它们的中心定义
立即学习“前端免费学习笔记（深入）”；
我们在之前的文章【css中linear-gradient()可以干什么？linear-gradient()详解】中已经介绍了线性渐变linear-gradient()属性的使用，在此就不在介绍了。下面我们来详细看看径向渐变—radial-gradient()属性的使用。
在径向渐变中，颜色不是如同线性渐变那样从渐变盒的一侧平滑地褪色到另一侧，它们反而是从单个点出现并且以圆形或椭圆形状平滑地向外扩展的。
radial-gradient()是通过指示渐变的中心（0%的椭圆将会在哪里）和结束形状（100%的椭圆）的大小和形状来指定径向渐变。颜色停止被作为一个列表给出，这和linear-gradient()是一样的。从渐变中心开始，朝向(并且可能超越)结束形状前进，根据指定的颜色停止绘制和着色均匀缩放的同心椭圆。
radial-gradient()属性的基本语法
径向渐变语法是：
radial-gradient( [ || ] [ at ] , )
举个例子：
background: radial-gradient(5em circle at top left, yellow, blue)
定义了一个5em宽的圆形径向渐变，其中心位于左上角。
参数分析如下：
:
确定渐变的中心，可以省略，但如果省略此参数，则默认为居中。
:
可以设置circle（圆形）或 ellipse（椭圆形）两个值； 确定渐变的结束形状分别是圆形还是椭圆形，可以省略。
:
确定渐变的结束形状的大小。如果省略，则默认为“farthest-corner”。它可以明确地通过关键字给出。出于关键字定义的目的，请将渐变框边缘视为在两个方向上无限延伸，而不是有限线段。
如果结束形状是椭圆形，则其轴与水平轴和垂直轴对齐。
当定义为圆和椭圆的渐变时接受以下关键字作为其参数值：
closest-side：该结束形状的尺寸使得它恰好符合的侧渐变框最接近渐变的中心。如果形状是椭圆形，则它恰好与每个尺寸中最近的一侧相交。
farthest-side：与closest-side相同，除了最终形状的大小基于最远的一侧。
closest-corner：该结束形状的尺寸使得它穿过的角落渐变框最接近渐变的中心。如果形状是椭圆形，则给出的结束形状具有与指定最近侧时相同的纵横比。
farthest-corner：与closest-corner相同，除了最终形状的大小基于最远的角。如果形状是椭圆形，则结束形状的宽高比与指定最远侧时的宽高比相同。
注：
1、如果被指定为“circle”或被省略，则可以明确地给出：
：明确给出圆的半径，负值无效。
百分比在这里是不被允许的；它们只能用于指定椭圆渐变的大小，而不是圆形渐变的大小。
2、如果将被指定为“ ellipse”或被省略，则可以将明确指定为：
{2}：
明确给出椭圆的大小。第一个值表示水平半径，第二个值表示垂直半径。百分比值相对于渐变框的相应维度。负值无效。
径向渐变示例
示例一：指定基本径向渐变的不同方法
radial-gradient(yellow, green);radial-gradient(ellipse at center, yellow 0%, green 100%);radial-gradient(farthest-corner at 50% 50%, yellow, green);
radial-gradient(circle, yellow, green);
radial-gradient(red, yellow, green);
示例二：显示了一个以盒子以外的某点为中心的渐变
radial-gradient(farthest-side at left bottom, red, yellow 50px, green);
示例三：设置为closest-side 的渐变
radial-gradient(closest-side at 20px 30px, red, yellow, green);radial-gradient(20px 30px at 20px 30px, red, yellow, green);
radial-gradient(closest-side circle at 20px 30px, red, yellow, green);radial-gradient(20px 20px at 20px 30px, red, yellow, green);
以上就是css中radial-gradient()是什么？radial-gradient()的使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613059.html
微信扫一扫 
支付宝扫一扫 
