标签：css3 颜色 linear eef2be gradient 渐变 f2441f image

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

 

1、css背景颜色渐变

代码：

<style>  
.content_bg{ 
	width:600px;max-width: 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 { 
	width:600px;max-width: 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 {  
	width:600px;max-width: 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边框颜色渐变

 

标签：css3,颜色,linear,eef2be,gradient,渐变,f2441f,image
来源： https://www.cnblogs.com/ypppt/p/13251560.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。