1. 漸變
漸變：使背景顏色有逐漸變化的效果
1. 線性漸變
background-image: linear-gradient(to left top, #c7edcc, #fde6e0, #dce2f1);
第一個參數(shù)可選值為：to top/right/left/bottom/top right/……
第二個參數(shù)到第n個參數(shù)為需要漸變的顏色，至少兩種顏色
2. 徑向漸變
background-image: radial-gradient(circle, #c7edcc, #fde6e0);
第一個參數(shù)可選值為：circle 圓形ellipse 橢圓形
第二個參數(shù)到第n個參數(shù)為需要漸變的顏色，至少兩種顏色
示例如下：文章來源：http://www.zghlxwxcb.cn/news/detail-825664.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
.box1 {
width: 300px;
height: 300px;
margin: 0 auto;
/* background-image: linear-gradient(90deg, #c7edcc 50%, #fde6e0 10%, #dce2f1); */
background-image: radial-gradient(circle, #c7edcc, #fde6e0);
}
</head>
<body>
<div class="box1"></div>
</body>
</html>
咳咳，CSS3似乎還有很多其他的東西，但我可能還沒學(xué)，所以就暫時完結(jié)了~文章來源地址http://www.zghlxwxcb.cn/news/detail-825664.html
到了這里，關(guān)于re:從0開始的CSS之旅 20. 漸變（暫完結(jié)撒花）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
