溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3如何將背景設置為漸變色，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
設置方法：1、使用“background:linear-gradient(漸變方向,顏色1,顏色2,..);”語句；2、使用“background:radial-gradient(shape 大小 位置,開始顏色,..,終止顏色);”語句。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS3 漸變（gradients）可以讓在兩個或多個指定的顏色之間顯示平穩的過渡。對比使用漸變圖片，gradients 可以減少下載的時間和寬帶的使用，并且在放大時看起來效果更好。
顏色值沿著一條隱式的直線逐漸過渡。由 linear-gradient() 產生。
為了創建一個線性漸變，你必須至少定義兩種顏色節點。顏色節點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。
/* 漸變軸為45度，從藍色漸變到紅色 */ linear-gradient(45deg, blue, red); /* 從右下到左上、從藍色漸變到紅色 */ linear-gradient(to left top, blue, red); /* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結束 */ linear-gradient(0deg, blue, green 40%, red);
語法
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )
<angle>：用角度值指定漸變的方向（或角度）。角度順時針增加。
<side-or-corner>：描述漸變線的起始點位置。to top, to bottom, to left 和 to right 這些值會被轉換成角度 0 度、180 度、270 度 和 90 度。其余值會被轉換為一個以向頂部中央方向為起點順時針旋轉的角度。漸變線的結束點與其起點中心對稱。
<color-stop-list>：顏色變化列表。支持透明度（rgba(255,0,0,0.1)）。
示例：背景色線性漸變--background-image+linear-gradient()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景漸變--線性漸變</title>
<style>
.demo{
width:500 ;
height: 300;
margin: 50px auto;
}
.demo *{
width: 200px;
height: 200px;
margin: 20px;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 16px;
float: left;
}
.demo1{
/* 底色 */
background-color: #fd0d0d;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
/* chrome 10+, safari 5.1+ */
background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
/* firefox; multiple color stops */
background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
/* ie 6+ */
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);
/* opera 11.1 */
background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
/* 標準寫法 */
background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);
}
.demo2{
/* 底色 */
background-color:#d41a1a;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
/* ie10 */
background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
/* opera 11.1 */
background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
/* 標準寫法 */
background-image: linear-gradient(45deg, #d41a1a, #d9e60c);
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">基本線性漸變--自上而下</div>
<div class="demo2">基本線性漸變--45度角</div>
</div>
</body>
</html>
radial-gradient() CSS 函數創建了一個圖像，該圖像的顏色值由一個中心點（原點）向外擴散并逐漸過渡到其他顏色值。
同樣至少需要定義兩種顏色節點，也可以指定漸變的中心（默認在中心點，center）、形狀（默認橢圓形 ellipse）、大小（默認 farthest-corner，表示到最遠的角落）
語法
radial-gradient( [shape size at position] ? <color-stop-list> [ , <color-stop-list> ]+ )
shape：橢圓形（ellipse，默認）或圓形（circle）
size：
closest-side， 漸變的邊緣形狀與容器距離漸變中心點最近的一邊相切（圓形）或者至少與距離漸變中心點最近的垂直和水平邊相切（橢圓）。
closest-corner， 漸變的邊緣形狀與容器距離漸變中心點最近的一個角相交。
farthest-side， 與 closest-side 相反，邊緣形狀與容器距離漸變中心點最遠的一邊相切（或最遠的垂直和水平邊）。
farthest-corner， 漸變的邊緣形狀與容器距離漸變中心點最遠的一個角相交。
position：可以是具體的兩個位置偏移值（10% 20%），也可以是關鍵字（left、right、top、bottom）
示例：背景色徑向漸變--background-image+radial-gradient()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景漸變--徑向漸變</title>
<style>
.demo{
width:500px ;
height:200px;
margin: 50px auto;
}
.demo *{
width:200px ;
height:200px;
margin: 50px 15px;
float: left;
}
.demo1{
background-image: -moz-radial-gradient(#ecff05, red);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */
background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */
background-image: radial-gradient(#ecff05, red);
}
.demo2{
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>
重復多次漸變圖案直到足夠填滿指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函數產生。
重復函數的參數同上，不同的是它會基于漸變長度（最后一個色標和第一個之間的距離）倍數重復。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景漸變--重復漸變</title>
<style>
.demo{
width:500px ;
height:200px;
margin: 50px auto;
}
.demo *{
width:200px ;
height:200px;
margin: 50px 15px;
float: left;
}
.demo1{
background: repeating-linear-gradient(
to top left,
lightpink,
lightpink 5px,
white 5px,
white 10px
);
}
.demo2{
background: repeating-radial-gradient(
powderblue,
powderblue 8px,
white 8px,
white 16px
);
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1"></div>
<div class="demo2"></div>
</div>
</body>
</html>
以上是“css3如何將背景設置為漸變色”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
