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>

效果：

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>

效果：

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

效果：