您现在的位置是：网站首页> 编程资料编程资料

用CSS3实现背景渐变的方法CSS3实现带视差背景渐变效果的平滑图片轮播幻灯片特效源码详解CSS背景渐变图片transtion过渡效果技巧css3编写浏览器背景渐变背景色的方法CSS3点击按钮实现背景渐变动画效果CSS实现背景渐变和自动全屏的代码

2021-09-05 1256人已围观

简介 这篇文章主要介绍了用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. }   


    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS进阶指引CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

    下一篇：CSS3动画制作的简单示例

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网