重復(fù)漸變
在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常會(huì)需要在一個(gè)背景上重復(fù)應(yīng)用漸變方式的情況，這時(shí)就需要使用重復(fù)漸變。
重復(fù)線性漸變
概念：重復(fù)線性漸變只是在線性漸變的基礎(chǔ)上加個(gè)repeating,代表連續(xù)重復(fù)的意思
語(yǔ)法：
background:repeating-linear-gradient(漸變角度，開(kāi)始顏色，結(jié)束顏色);
說(shuō)明：該語(yǔ)法用于定義漸變方式為重復(fù)線性漸變，括號(hào)內(nèi)的參數(shù)取值和線性漸變的相同。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>重復(fù)線性漸變</title>
<style>
div{
width:200px;
height:200px;
margin:10px;
}
.a{
background:repeating-linear-gradient(90deg,red,orange 20%,yellow 40%);
}
.b{
background:repeating-linear-gradient(180deg,red,orange 20%,yellow 40%);
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
運(yùn)行結(jié)果
重復(fù)徑向漸變
概念：重復(fù)徑向漸變是在徑向漸變的基礎(chǔ)上也前加個(gè)repeating,代表連續(xù)重復(fù)的意思
語(yǔ)法格式：
background: repeating-radial-gradient(漸變形狀 圓心位置,開(kāi)始顏色,...,結(jié)束顏色)；
說(shuō)明：該語(yǔ)法用于定義漸變方式為重復(fù)徑向漸變，括號(hào)內(nèi)的參數(shù)取值和徑向漸變的相同。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>重復(fù)徑向漸變</title>
<style>
div{
width:200px;
height:200px;
margin:20px;
border-radius: 50%;;
}
.a{
background:repeating-radial-gradient(circle at center,red,orange 20%,yellow 40%);
}
.b{
background:repeating-radial-gradient(ellipse at bottom,red,orange 20%,yellow 40%);
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
運(yùn)行結(jié)果文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-802514.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-802514.html
到了這里，關(guān)于CSS3漸變屬性之重復(fù)漸變的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
