用CSS3实现背景渐变的方法 - 网站

用CSS3实现背景渐变的方法

分类：CSS_CSS3 答疑 - 常见问题 · 发布时间：2021-12-13 08:52 · 阅读：5179

这篇文章主要介绍了用CSS3实现背景渐变的方法,作者并没有给出效果demo这个比较残念...需要的朋友可以参考下

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

CSS Code复制内容到剪贴板
  1. 'gradient1'>
    
  • 'gradient2'>
    •     
  • 'gradient3'>
    •    

    CSS 规则如下。

    CSS Code复制内容到剪贴板
    1. /*为元素盒子添加样式*/    
    2. div {    
    3.  height:150px;    
    4.  width:200px;    
    5.  border:1px solid #ccc;    
    6.  float:left;    
    7.  margin:16px;    
    8. }    
    9.   
    10. /*例 1：默认为从上到下*/    
    11. .gradient1 {    
    12.  background:linear-gradient(#e86a43, #fff);    
    13. }    
    14.   
    15. /*例 2：从左到右*/    
    16. .gradient2 {    
    17.  background:linear-gradient(left, #64d1dd, #fff);    
    18. }    
    19.   
    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(50px 30px, circle, #fff, #64d1dd,    
    9. #4947ba);    
    10. }   


    标签：
    CSS3 渐变

    相关文章

    css3媒体查询中device-width和width的区别详解

    这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    CSS3媒体查询实现不同宽度的下不同内容的展示功能

    这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例，需要的朋友可以参考下

    CSS3几种实现子容器水平垂直居中的方法

    本文有几种方法可以实现容器与子容器水平垂直居中，主要包括Flexbox布局，position绝对定位+transform，表格布局，具有一定的参考价值，感兴趣的可以了解一下

    css3实现文字首尾衔接跑马灯的示例代码

    这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    CSS的浮动及清除浮动的5种方法介绍

    这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    返回分类 返回首页