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 径向渐变事例分享
  • 华为g610升级方法和教程
  • 你就像那一把火——生姜奶茶
  • lolS7上单人马天赋符文出装攻略2017最新版?
  • 我的世界唱片机怎么做?
  • 晏华10怎么打
  • 热门搜索
    轶是什么意思 姜子牙属什么 率先垂范的意思 马赛克是什么意思 曾经沧海难为水除却巫山不是云是什么意思 ordinary是什么意思 昕是什么意思 noon是什么意思 待产需要准备什么 质朴无华的意思