如何使用cssradial-gradient()-创新互联
如何使用css 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、如果
百分比在这里是不被允许的;它们只能用于指定椭圆渐变的大小,而不是圆形渐变的大小。
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);
示例三:设置
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()的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章名称:如何使用cssradial-gradient()-创新互联
文章转载:http://pwwzsj.com/article/dhijih.html