css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

站长手记作者： 2024-08-28 04:40:01

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>

css边框颜色渐变

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_69934.html