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怎么打
  • 热门搜索
    投简历怎么投 怎么注册淘宝网店 福建师范大学怎么样 紫薯怎么吃 酸奶机怎么做酸奶 腿毛怎么彻底去掉 左眼一直跳是怎么回事 怎么查自己手机号码 怎么去除黑头 电脑风扇怎么拆