css中radial-gradient()有什么用

这篇文章主要介绍了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([||][at],)

举个例子：

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

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

1.jpg

参数分析如下：

:

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

:

可以设置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(ellipseatcenter,yellow0%,green100%);

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

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