作者:鸟的蛋蛋 | 来源:互联网 | 2020-08-15 14:00
本篇文章给大家介绍的是css中radial-gradient()是什么?radial-gradient()详解。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
本篇文章给大家介绍的是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宽的圆形径向渐变,其中心位于左上角。
明确给出椭圆的大小。第一个值表示水平半径,第二个值表示垂直半径。百分比值相对于渐变框的相应维度。负值无效。
径向渐变示例
示例一:指定基本径向渐变的不同方法
radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);
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()的使用的详细内容,更多请关注 第一PHP社区 其它相关文章!