css边框椭圆渐变_CSS3圆形和椭圆形渐变[CSS3技巧]

今天我们将继续讨论CSS3渐变 。 在上一篇文章中，我们向您展示了如何创建线性渐变 。 这次我们将介绍它们的相对， 圆形和椭圆形渐变 。

渐变语法

CSS3中的渐变是使用background-image属性声明的。 当我们还需要在单个规则集中添加background-color ，以使它们不会相互冲突时，这是为了实现更好的兼容性。 然后，要创建径向渐变，我们只需使用radial-gradient()函数对其进行调用。 该函数中包含四个值以正确设置渐变。

第一个值定义渐变位置 。 我们可以使用描述性关键字，例如top，bottom，center和left，也可以更具体一些，例如50% 50%设置渐变在中心或0% 0%设置渐变从top left开始。

第二个值定义形状和渐变大小 ，有两个参数可用来塑造渐变的形状，第一个是默认值的ellipse ，第二个是circle 。

对于渐变大小 ，我们可以选择以下六个参数之一。

价值观	描述
closest-side	渐变的形状与最接近中心的框边相交（对于圆形），或者与最接近中心的垂直面和水平边相交（对于椭圆）。
closest-corner	渐变的大小已确定大小，以使其恰好与盒子的中心最接近的角。
farthest-side	与最接近的一面相似，除了形状的大小适合与盒子最远离其中心的一面（或垂直和水平边）相交。
farthest-corner	渐变的形状具有适当大小，因此恰好与盒子的中心相交到最远的角。
contain
cover

最后，第三个和第四个定义颜色组合 。 因此，这是我们编写用于创建椭圆渐变的语法的方式，这一次，我们将使用cover作为渐变大小，以使其广泛传播，覆盖容器；

body {
	background-image: radial-gradient(center center, ellipse cover, #ffeda3, #ffc800);
}

要创建圆弧渐变，我们可以这样简单地进行操作：

body {
	background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
}

顾名思义，渐变形状将是一个圆形。

浏览器支持

不过请注意， 所有浏览器仍在为该功能提供全面支持，因此它们仍需要供应商前缀。 因此，可以在所有现代浏览器（ IE10 +，Firefox 3.6 +，Chrome 4.0 +，Safari 4.0+和Opera 11+）中使用的完整语法完全相同 。

body {
	background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
	background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
	background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
	background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
	background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
}

观看演示或下载源以进行渐变播放。

• 演示版
• 下载源

最后的话

创建CSS3径向渐变并不像您想象的那么难，尤其是当您从这些工具获得生成代码的帮助时：

• Colorzilla渐变
• Gradientoo

径向渐变只是CSS3的一种，我们将在以后的帖子中继续讨论该主题，敬请关注Hongkiat.com

翻译自: https://www.hongkiat.com/blog/css3-circular-elliptical-gradient/