漸變屬性
線性漸變
概念：線性漸變，指的是在一條直線上進行的漸變。在線性漸變過程中，起始顏色會沿著一條直線按順序過渡到結(jié)束顏色
語法：
background:linear-gradient(漸變角度，開始顏色，結(jié)束顏色);
漸變角度
線性漸變的“漸變角度”取值有兩種：
-
一種是使用角度（單位為deg)
-
另一種是使用關(guān)鍵字。
關(guān)鍵字取值
| 屬性值 | 對應(yīng)角度 | 說明 |
|---|---|---|
| to top | 0deg | 從下到上 |
| to bottom | 180deg | 從上到下（默認值） |
| to left | 270deg | 從右到左 |
| to right | 90deg | 從左到右 |
| to top left | 無 | 從右下角到左上角（斜對角） |
| to top right | 無 | 從左下角到右上角（斜對角） |
注意：未設(shè)置漸變角度時，會默認為“180deg”，等同于“to bottom”。
方向圖表
顏色值
“開始顏色”表示起始顏色，“結(jié)束顏色”顧名思義表示最后一個顏色值。
開始顏色和結(jié)束顏色之間可以添加多個顏色值，各顏色值之間用英文逗號“,”隔開
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>線性漸變</title>
<style>
.main{
width:600px;
display:flex;
}
div{
width:100px;
height:100px;
margin-left:20px;
}
.demo{
background:linear-gradient(red,yellow);
}
.demo1{
background:linear-gradient(red 70%,yellow);
}
.demo2{
background:linear-gradient(to right,red 70%,yellow);
}
.demo3{
background:linear-gradient(to right bottom,red,yellow);
}
.demo4{
background:linear-gradient(30deg,red,yellow);
}
.demo5{
background:linear-gradient(0deg,red,yellow);
}
</style>
</head>
<body>
<div class="main">
<!-- 默認漸變 -->
<div class="demo"></div>
<!--默認情況西，設(shè)置紅色在元素70%的位置之后開始漸變-->
<div class="demo1"></div>
<!--設(shè)置一個從左到右的漸變背景色 -->
<div class="demo2"></div>
<!-- 創(chuàng)建一個從左上到右下的漸變顏色 -->
<div class='demo3'></div>
<!-- 創(chuàng)建一個30度角的線性漸變 -->
<div class="demo4"></div>
<!-- 創(chuàng)建一個0度角的線性漸變 -->
<div class="demo5"></div>
</div>
</body>
</html>
運行結(jié)果
徑向漸變
概念：徑向漸變，指的是顏色從內(nèi)到外進行的圓形漸變（從中間往外拉，像圓一樣）。
徑向漸變是圓形漸變或橢圓漸變，顏色不再是沿著一條直線漸變，而是起始顏色會從一個中心點開始向所有方向漸變
語法：
background:radial-gradient(漸變形狀 圓心位置,開始顏色,結(jié)束顏色)；
屬性值
- 漸變形狀：可選值，表示用于定義形狀大小
- 圓心位置：可選值，表示用于定義圓心位置
- 開始顏色：必選值，用于定義起始顏色
- 結(jié)束顏色：必選值，用于定義結(jié)束顏色
說明：圓心位置和漸變形狀都是可選值。如果省略，則表示采用默認值。開始顏色和結(jié)束顏色都是必選值，可以有多個顏色值
圓心位置
圓心位置用于定義徑向漸變的“中心位置"，可以使用“at"加上關(guān)鍵詞或參數(shù)值來定義徑向漸變的圓心位置。取值跟background-position屬性取值一樣。
常用取值有兩種：一種是“長度值”(如10px),另一種是“關(guān)鍵字(如top)”.
| 屬性值/關(guān)鍵字 | 說明 |
|---|---|
| 像素值/百分比 | 圓心的水平和垂直坐標，可以為負值 |
| center | 中部（默認值） |
| top | 頂部 |
| bottom | 底部 |
| left | 左部 |
| right | 右部 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
漸變形狀
漸變形狀用于定義徑向漸變的“形狀”
參數(shù)取值
| 屬性值 | 說明 |
|---|---|
| 像素值/百分比 | 漸變形狀的水平和垂直半徑 |
| ellipse | 橢圓形（默認值） |
| circle | 圓形 |
顏色值
參數(shù)開始顏色用于定義徑向漸變的起始顏色，而參數(shù)結(jié)束顏色用于定義徑向漸變的結(jié)束顏色
此外，徑向漸變可以接收一個值列表，可以同時定義多種顏色的徑向漸變，各顏色值之間用英文逗號（,）隔開
實例：文章來源：http://www.zghlxwxcb.cn/news/detail-781065.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>徑向漸變</title>
<style>
.main{
width:600px;
display:flex;
}
div{
width:100px;
height:100px;
margin-left:20px;
}
.demo3{
width:160px;
height:100px;
line-height:200px;
border-radius:50px 50px ;
}
.demo{
background:radial-gradient(red,blue);
}
.demo1{
background:radial-gradient(circle,red,blue);
}
.demo2{
background:radial-gradient(circle,red 5%,blue 20%);
}
.demo3{
background:radial-gradient(circle at center, orange 20%,yellow 50%);
}
</style>
</head>
<body>
<div class="main">
<!-- 創(chuàng)建一個從紅色到藍色的徑向漸變 -->
<div class="demo"></div>
<!--創(chuàng)建一個真正的圓形漸變 -->
<div class="demo1"></div>
<div class="demo2"></div>
<!-- 創(chuàng)建一個雞蛋 -->
<div class="demo3"></div>
</div>
</body>
</html>
運行結(jié)果
文章來源地址http://www.zghlxwxcb.cn/news/detail-781065.html
到了這里，關(guān)于CSS3漸變屬性詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
