线性渐变 — 默认，2 种颜色：linear-gradient_default_two_colors
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(yellow, red);
}
</style>
<div class="box">这是一个线性渐变。</div>线性渐变 — 3 种颜色，包括透明：linear-gradient_default_three_colors_including_transparent
<!DOCTYPE html>
<title>My Example</title>
<style>
body {
background-image: url('/pix/samples/bg2.png');
}
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(blue, transparent, red);
}
</style>
<div class="box">这具有线性渐变。</div>线性渐变 — 偏移：linear-gradient_offset
<!DOCTYPE html>
<title>My Example</title>
<style>
body {
background-image: url('/pix/samples/bg2.png');
}
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(blue -200px, transparent);
}
</style>
<div class="box">这具有线性渐变。</div>线性渐变 — 到底部：linear-gradient_to_bottom
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(to bottom, blue, yellow, red);
}
</style>
<div class="box">这具有线性渐变。</div>线性渐变 — 到顶部：linear-gradient_to_top
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(to top, blue, yellow, red);
}
</style>
<div class="box">这具有线性渐变。</div>线性渐变 — 向右：linear-gradient_to_right
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(to right, blue, yellow, red);
}
</style>
<div class="box">这具有线性渐变。</div>线性渐变 — 向左：linear-gradient_to_left
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(to left, blue, yellow, red);
}
</style>
<div class="box">这具有线性渐变。</div>线性渐变 — 底部，右侧：linear-gradient_to_bottom_right
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(to bottom right, blue, yellow, red);
}
</style>
<div class="box">这具有线性渐变。</div>线性渐变 — 到底部，向左：linear-gradient_to_bottom_left
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(to bottom left, blue, yellow, red);
}
</style>
<div class="box">这是一个线性渐变。</div>线性梯度 — 特定角度：linear-gradient_specific_angle
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: linear-gradient(45deg, blue, yellow, red);
}
</style>
<div class="box">这具有线性渐变。</div>重复线性渐变：repeating-linear-gradient
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: repeating-linear-gradient(yellow 20%, orange 40%);
}
</style>
<div class="box">这具有重复的线性渐变。</div>重复线性渐变 — 对角线：repeating-linear-gradient_diagonal
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: repeating-linear-gradient(to bottom right, yellow 20%, orange 40%);
}
</style>
<div class="box">这具有重复的线性渐变。</div>径向渐变：radial-gradient
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
background: radial-gradient(yellow, red);
border: solid;
font-size: 5vw;
text-align: center;
padding: 10vw;
}
</style>
<div class="box">这具有径向渐变。</div>径向渐变 — 圆：radial-gradient_circle
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
background: radial-gradient(circle, yellow, red);
border: solid;
font-size: 5vw;
text-align: center;
padding: 10vw;
}
</style>
<div class="box">这是一个径向渐变。</div>重复径向渐变：repeating-radial-gradient
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: repeating-radial-gradient(yellow 20%, orange 40%);
}
</style>
<div class="box">这有一个重复的径向渐变。</div>重复径向渐变 — 圆：repeating-radial-gradient_circle
<!DOCTYPE html>
<title>My Example</title>
<style>
.box {
font-size: 5vw;
padding: 10vw;
border: solid;
background: repeating-radial-gradient(circle, yellow 20%, orange 40%);
}
</style>
<div class="box">这具有重复的径向渐变。</div>文章源自淘咖首码项目网-https://www.youranweb.com/275.html继续阅读
我的微信
淘咖首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台，所有文章均来自网络和网友投稿，不代表本站任何立场，请勿盲目下载注册参与，以免为您带来不必要的损失。
评论