zoukankan      html  css  js  c++  java
  • css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果。这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考!

    1、css背景颜色渐变

    代码:

    <style>  
    .content_bg{ 
    	600px;max- 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;color:#fff;
    	background-image:linear-gradient(left, #eef2be,#f2441f);   
    	background-image:-webkit-linear-gradient(left, #eef2be,#f2441f);
    	background-image:-moz-linear-gradient(left, #eef2be,#f2441f);
    	background-image:-o-linear-gradient(left, #eef2be,#f2441f);
    	background-image:linear-gradient(left, #eef2be,#f2441f);   
    }  
    </style>  
    <div class="content_bg">css背景颜色渐变</div>
    

      

    效果:

    css背景颜色渐变

    2、文字颜色渐变

    代码:

    <style>
    .content_txt { 
    	600px;max- 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;
    	background-image:-webkit-linear-gradient(left, #eef2be,#f2441f);
    	background-image:-moz-linear-gradient(left, #eef2be,#f2441f);
    	background-image:-o-linear-gradient(left, #eef2be,#f2441f);
    	background-image:linear-gradient(left, #eef2be,#f2441f);   
    	-webkit-background-clip:text; -webkit-text-fill-color:transparent; 
    }  
    </style>  
    <div class="content_txt">css文字颜色渐变</div>
    

      

    效果:

    css文字颜色渐变

    3、边框颜色渐变

    代码:

    .content_border {  
    	600px;max- 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;color:#888; 
    	border: 10px solid;
        border-image: -webkit-linear-gradient(#eef2be,#f2441f) 30 30;
        border-image: -moz-linear-gradient(#eef2be,#f2441f) 30 30;
        border-image: linear-gradient(#eef2be,#f2441f) 30 30;
    }  
    </style>  
    <div class="content_border">css边框颜色渐变</div>
    

    资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh

    效果:

    css边框颜色渐变
  • 相关阅读:
    struts2中struts.xml配置文件详解【未整理】
    程序员,别了校园入了江湖
    xml常用的error-page
    struts2中struts.xml配置文件详解
    Struts 2初体验
    Hibernate 抛出的 Could not execute JDBC batch update
    MyEclipse快捷键
    CSS 字体
    绑定事件 addEventListener
    设置DIV最小高度以及高度自适应随着内容的变化而变化
  • 原文地址:https://www.cnblogs.com/ypppt/p/13251560.html
Copyright © 2011-2022 走看看