這篇文章將為大家詳細講解有關怎么用css實現漸變效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一、css背景色漸變樣式
1.css線性背景漸變樣式
語法：
background-image:linear-gradient(<point>||,<stop>,<stop>,<stop>)
第一個參數是漸變起始點或角。第二個參數是一種顏色停止點(colorstops)。至少需要兩種顏色(起點和終點)，你可以添加任意種顏色來增加顏色漸變的豐富程度。對顏色停止點的定義可以是一種顏色，或一種顏色加一個百分比。
代碼（考慮瀏覽器兼容性）：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>css背景漸變--線性漸變</title>
<style>
.demo{
width:500;
height:300;
margin:50pxauto;
}
.demo*{
width:200px;
height:200px;
margin:20px;
text-align:center;
line-height:200px;
color:#fff;
font-size:16px;
float:left;
}
.demo1{
/*底色*/
background-color:#fd0d0d;
/*chrome2+,safari4+;multiplecolorstops*/
background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0.32,#fd0d0d),color-stop(0.66,#d89e3c),color-stop(0.83,#97bb51));
/*chrome10+,safari5.1+*/
background-image:-webkit-linear-gradient(#fd0d0d,#d89e3c,#97bb51);
/*firefox;multiplecolorstops*/
background-image:-moz-linear-gradient(top,#fd0d0d,#d89e3c,#97bb51);
/*ie6+*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d',endColorstr='#d89e3c');
/*ie8+*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d',endColorstr='#d89e3c')";
/*ie10*/
background-image:-ms-linear-gradient(#fd0d0d,#d89e3c,#97bb51);
/*opera11.1*/
background-image:-o-linear-gradient(#fd0d0d,#d89e3c,#97bb51);
/*標準寫法*/
background-image:linear-gradient(#fd0d0d,#d89e3c,#97bb51);
}
.demo2{
/*底色*/
background-color:#d41a1a;
/*chrome2+,safari4+;multiplecolorstops*/
background-image:-webkit-gradient(linear,leftbottom,righttop,color-stop(0.32,#d41a1a),color-stop(0.66,#d9e60c),color-stop(0.83,#5c7c99));
/*chrome10+,safari5.1+*/
background-image:-webkit-linear-gradient(45deg,#d41a1a,#d9e60c,#5c7c99);
/*firefox;multiplecolorstops*/
background-image:-moz-linear-gradient(45deg,#d41a1a,#d9e60c,#5c7c99);
/*ie10*/
background-image:-ms-linear-gradient(45deg,#d41a1a0%,#d9e60c100%);
/*opera11.1*/
background-image:-o-linear-gradient(45deg,#d41a1a,#d9e60c);
/*標準寫法*/
background-image:linear-gradient(45deg,#d41a1a,#d9e60c);
}
</style>
</head>
<body>
<divclass="demo">
<divclass="demo1">基本線性漸變--自上而下</div>
<divclass="demo2">基本線性漸變--45度角</div>
</div>
</body>
</html>
關于“怎么用css實現漸變效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
