<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渐变</title>
</head>
<body>
<!--
CSS3定义了两种类型的渐变（gradients）：
线性渐变（linear gradients）：向上、向下、向左、向右、向对角方向。
径向渐变（radial gradients）：由它们的中心定义。
渐变相关属性：background-image。
-->
<!-- 渐变不可用的情况下，需设置background-color。如下： -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;background-color
background-color: beige; /* 浏览器不支持时显示，需放在background-image属性前面 */
background-image: linear-gradient(white);
}
</style>
-->
<!-- 线性渐变默认情况：从上到下（to bottom） -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: linear-gradient(white, black);
/* background-image: linear-gradient(to bottom, black, white); */
}
</style>
-->
<!-- 线性渐变：从左到右（to right） -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: linear-gradient(to right, red, yellow);
}
</style>
-->
<!-- 线性渐变：从下到上（to top） -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: linear-gradient(to top, black, white);
}
</style>
-->
<!-- 线性渐变：从左上角到右下角（to bottom right） -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: linear-gradient(to bottom right, black, white);
}
</style>
-->
<!--
线性渐变： 使用角度，即水平线和渐变线之间的角度。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变，-90deg 将创建一个从右到左的渐变。
老版本浏览器换算公式： 90 - x = y ，其中 x 为标准角度，y为非标准角度。
-->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: linear-gradient(-30deg, black, red);
}
</style>
-->
<!-- 线性渐变：使用多个颜色节点 -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
</style>
-->
<!-- 线性渐变：使用透明度 -->
<!--
<style type="text/css">
#box1 {
width: auto;
height: 300px;
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
</style>
-->
<!-- 线性渐变使用多个颜色节点后跟参数注意事项如下：
1、颜色后面可以加百分数，比如20%、50%。也可以写固定的大小，比如20px、50px。百分比或固定大小是指某个颜色值距离起点的开始位置 。
2、如果不设置百分比，默认是根据颜色的个数来给每个颜色值设置的。起始值是0%，末值是100%，中间如果再有多个颜色值，则根据100/（个数-1）平均下去。
3、渐变过渡区的占比为总的空间（高度或宽度）减去上下两个着色块空间占比剩下的空间。
4、当前几个颜色后百分数都设置为0时，默认从最后一个百分数设置为0的颜色开始进行渐变。
5、如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。
-->
<!--
<style type="text/css">
#box1{
width: auto;
height: 100px;
background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
}
</style>
<style type="text/css">
#box2{
width: auto;
height: 100px;
background-image: linear-gradient(red,orange 16.67%,yellow 33.33%,green 50%,blue 66.67%,indigo 83.33%,violet);
}
</style>
<style type="text/css">
#box3{
width: auto;
height: 100px;
background-image: linear-gradient(red 50%, white 70%);
}
</style>
<style type="text/css">
#box4{
width: auto;
height: 100px;
background-image: linear-gradient(red 50%, white 70px);
}
</style>
<style type="text/css">
#box5{
width: auto;
height: 100px;
background-image: linear-gradient(red 0%, white 0%, blue 0%, black);
}
</style>
<style type="text/css">
#box6{
width: auto;
height: 100px;
background-image: linear-gradient(red 50%, blue 20%, orange 40%);
}
</style>
-->
<!-- 线性渐变：重复渐变，以最后一个颜色的百分比进行分割。如果最后一个颜色的百分比设置为10%，则分割为（100/10=10）个 -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: repeating-linear-gradient(red, orange 10%);
}
</style>
-->
<!-- 线性渐变：竖着线条感实现，需设置background-size属性 -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: linear-gradient(90deg, red 50%, orange 50%);
background-size: 10%;
}
</style>
-->
<!-- 线性渐变：随机线条背景 -->
<!--
<style type="text/css">
#box1 {
width: auto;
height: 300px;
background-color: red;
background-image: linear-gradient(90deg, rgba(255, 255, 255, .07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255, 255, 255, .17) 50%, transparent 50%),
linear-gradient(90deg, rgba(255, 255, 255, .13) 50%, transparent 50%),
linear-gradient(90deg, rgba(255, 255, 255, .19) 50%, transparent 50%);
background-size: 13px, 29px, 37px, 53px;
}
</style>
-->
<!-- 径向渐变默认情况：渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。 -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: radial-gradient(red, white, black);
}
</style>
-->
<!-- 径向渐变：颜色节点不均匀分布 -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: radial-gradient(red 10%, white 20%, black 50%);
}
</style>
-->
<!-- 径向渐变：设置形状 -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: radial-gradient(circle, red, white, black);
}
</style>
-->
<!-- 径向渐变：设置渐变的大小 -->
<!-- size：closest-side、farthest-side、closest-corner、farthest-corner -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: radial-gradient(closest-side at 20% 20%, red, white, black);
}
</style>
-->
<!-- 径向渐变：设置重复渐变 -->
<!--
<style type="text/css">
#box1{
width: auto;
height: 300px;
background-image: repeating-radial-gradient(circle, red, white 10%, black 20%);
}
</style>
-->
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
</body>
</html>
浙公网安备 33010602011771号