CSS3实现径向渐变效果的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
用CSS3实现背景渐变效果,可以丰富我们网页的内容,也提升用户视觉效果。当然更重要的是,提高用户体验!我们可以使用CSS3中的径向渐变属性实现径向渐变效果。
那么我们在前面的文章中,已经给大家介绍了CSS3实现线性渐变效果。
<强>
所谓径向渐变(径向梯度)就是由它们的中心开始定义。
代码示例如下:
& lt; ! DOCTYPE>
& lt; html>
& lt;元charset=皍tf-8"祝辞
& lt; head>
& lt; title> CSS3创建径向渐变效果示例& lt;/title>
& lt;风格类型=拔谋?css"比;
.container {
text-align:中心;
填充:20 px 0;
宽度:960 px;
保证金:0汽车;
}
.container div {
宽度:200 px;
身高:150 px;
显示:inline-block;
保证金:2 px;
颜色:# ec8007;
vertical-align:最高;
行高:230 px;
字体大小:20 px;
}
.radial {
背景:径向渐变(b6c9c # 4, # 5 ac4ed);
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癱ontainer"祝辞
& lt; div类=皉adial"祝辞径向径向渐变& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html> 渐变效果如下图:
图中渐变的效果就是从中心处由颜色# 4 b6c9c过渡到颜色# 5 ac4ed。
上图是由颜色# ff5309过渡到# efdf0e。
<强>径向渐变属性语法:
背景:径向渐变(中心、形状大小、start-color…last-color); 在默认情况下,径向渐变的方式是颜色节点均匀分布,渐变的形状是椭圆形。
<强>
感谢各位的阅读!看完上述内容,你们对CSS3实现径向渐变效果的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
