用CSS3如何实现背景渐变的方法

互联网
小鱼们欢快的闹腾起来，有的甩动着尾巴，有的吐着泡泡，有的扭动着身体，互相追玩，好不热闹。春天来了！你看，融化的冰水把小溪弄醒了。 "丁粳、丁粳 "，它就像大自然的神奇歌手，唱着清脆悦耳的歌，向前奔流……

CSS3 之前，必须依赖 Adobe Photoshop 等图形处理软件来制作渐变图，再以背景图片方式添加给元素。 而现在， 使用 CSS就可以创造出各种渐变效果了。渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用 background-image 属性

CSS Code复制内容到剪贴板
  1. <divclass='gradient1'></div>
  2. <divclass='gradient2'></div>
  3. <divclass='gradient3'></div>

CSS 规则如下。

CSS Code复制内容到剪贴板
  1. /*为元素盒子添加样式*/
  2. div{
  3. height:150px;
  4. width:200px;
  5. border:1pxsolid#ccc;
  6. float:left;
  7. margin:16px;
  8. }
  10. /*例1：默认为从上到下*/
  11. .gradient1{
  12. background:linear-gradient(#e86a43,#fff);
  13. }
  15. /*例2：从左到右*/
  16. .gradient2{
  17. background:linear-gradient(left,#64d1dd,#fff);
  18. }
  20. /*例3：左上到右下*/
  21. .gradient3{
  22. background:linear-gradient(-45deg,#e86a43,#fff);
  23. }

放射性渐变

在创建放射性渐变时，可以使用参数指定形状、位置、尺寸、颜色和不透明度

CSS Code复制内容到剪贴板
  1. .gradient1{
  2. background:-webkit-radial-gradient(#fff,#64d1dd,#70aa25);
  3. }
  4. .gradient2{
  5. background:-webkit-radial-gradient(circle,#fff,#64d1dd,#e86a43);
  6. }
  7. .gradient3{
  8. background:-webkit-radial-gradient(50px30px,circle,#fff,#64d1dd,
  9. #4947ba);
  10. }


以上就是用CSS3如何实现背景渐变的方法。一个人的成长，就是从自信到自责再到自信。既然如此，有些人自认到达巅峰，又何尝不为底层。更多关于用CSS3如何实现背景渐变的方法请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例