建站百科

NEWS

青岛网站制作:如何使用css3给图片实现渐变效果

2022/7/30 11:22:47 阅读()

青岛网站制作:如何使用css3给图片实现渐变效果?我们用填充式径向渐变repeating-radial-gradient是对渐变的填充。

使用语法:

radial-gradient([circle||][at]?,|[ellipse||[|]{2}][at]?,|[[circle|ellipse]||][at]?,|at,[,]+)


代码示例:

<style>
div{
width:300px;
height:150px;
border:1pxsolid#ddd;
float:left;
margin:10px;
}
.c1{
background:repeating-radial-gradient(circle,#f000,#ff010%,#f0015%);
}
.c2{
background:repeating-radial-gradient(
attopleft,
#f00,
#ff010%,
#08015%,
#ff020%,
#f0025%
);
}
.c3{
background:repeating-radial-gradient(
circleclosest-cornerat20px50px,
#f00,
#ff010%,
#08020%,
#ff030%,
#f0040%
);
}
</style>

<divclass="c1"></div>
<divclass="c2"></div>
<divclass="c3"></div>

  以上是青岛网站建设中使用css3给图片实现渐变效果的方法之一,要想了解更多内容请到city86官网查看更多网站制作相关内容。

本文地址:http://www.city86.com/news_view_457/

    服务热线

    24小时咨询:

    15054251826

    业务咨询:

    15966820013(微信同号)

    官方微信

    关注公众号

    扫一扫加微信

    Copyright © 2011-2022 青岛诚企网络 city86.com
    青岛诚企网络专业企业网站建设-企业快速建站-成品网站制作-网站定制-网站设计-专业网站建设公司.

    在线客服

    Online Service