网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

css3 径向渐变事例分享

时间:2024-11-05 12:48:33

1、我们的架构非常简单 ,就页面中包含一个 div ,用 css 写出div 样式让它在页面中显示出来;

css3 径向渐变事例分享css3 径向渐变事例分享css3 径向渐变事例分享

2、这里在给 div 美化一下border-radius:20px;将直角的边框变为圆弧;margin:20px auto;控制div在页面的位置;

css3 径向渐变事例分享css3 径向渐变事例分享

3、然后我们实现径向渐变的效果;background:radial-gradient(white,red)这里,radial-gradient(white,red)(两种渐变类型之一,默认由中心开始,白色到红色的过度;)

css3 径向渐变事例分享css3 径向渐变事例分享

4、之后我们再添加几个颜色看看效果,白色依然是中心,最后的换为浅蓝;如图二;

css3 径向渐变事例分享css3 径向渐变事例分享

5、在为渐变添加颜色的时候还可以控制每个颜色的的节点,就是如#700fff 70%;

css3 径向渐变事例分享css3 径向渐变事例分享
© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com