CSS学习记录18

CSS渐变

CSS渐变您可以显示两种或多种指定颜色之间的平滑过渡。

CSS定义了两种渐变类型：

• 线性渐变（向下/向上/向左/向右/对角线）
• 径向渐变（由其中心定义）

CSS线性渐变

如需创建线性渐变，您必须至少两个色标。色标使您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认）

下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色。

#grad {background-image: linear-gradient(red, yellow);
}

 

线性渐变- 从左到右

下面的例子展示了从左开始的线性渐变。它从红色开始，过渡到黄色。 方向词为同 right，可以理解为到右边，所以从左开始。

#grad {background-image: linear-gradient(to right, red , yellow);
}

 

线性渐变-对角线

您可以通过指定水平和垂直起始位置来实现对角渐变。下面的例子展示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色：

#grad {background-image: linear-gradient(to bottom right, red, yellow);
}

 

使用角度

如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。值0deg等于(to top)。 值90deg等于向右（to right）。值180deg等于向下（to bottom）。 相当于一个圆圈中有一个指针最开始指向正上方，增加角度相当于指针顺时针旋转。

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

这个角度指定水平线和渐变线之间的角度。

#grad {background-image: linear-gradient(-90deg, red, yellow);
}

使用多个色标

下面的例子展示了多个色标的线性渐变（从上到下）：

#grad {background-image: linear-gradient(red, yellow, green);
}

 

使用透明度

CSS渐变还支持透明度，也可用于创建渐变效果。如需增加透明度，可以使用rgba()函数来定义色标。 rgba()函数中的最后一个参数可以是0到1的值，它定义颜色的透明度： 0 表示全透明， 1 表示全彩色（无透明）。

下面的例子展示了从左开始的线性渐变。他开始完全透明，然后过渡为全色红色：

#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

 

重复线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

重复渐变的长度是第一个色标和最后一个色标之间的距离。如果第一种颜色没有色标长度，则色标长度默认为0。每次重复时，色标的位置都会以基本线性渐变长度的倍数移动。因此，每个结束色标的位置都会与起始色标的位置重合； 如果色值不同，就会产生鲜明的视觉过渡。可以通过重复第一种颜色值作为最后一种颜色值来改变这种情况。

与其他渐变一样，线性重复渐变没有内在尺寸，也就是说，它没有固有或首选的尺寸，也没有首选的比例，其实际大小取决于所应用的元素的大小。

由于<gradient>属于<image>数据类型，因此只能用在可以使用<image>的地方。因此，repeating-linear-gradient() 在background-color 以及其他使用<color>数据类型上不起作用。

#grad {background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

 

 CSS径向渐变

径向渐变由其中心定义。如需创建径向渐变，您还必须定义至少两个色标。

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape为椭圆形，size为最远角，position为中心。

径向渐变-均匀间隔的色标（默认）

#grad {background-image: radial-gradient(red, yellow, green);
}

 

径向渐变-不同间距的色标

下面的例子展示了一个径向渐变，其色标之间的间隔不同：

#grad {background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

 设置形状

shape参数定义形状。它可接受circle 或 ellipse值。 默认值为ellipse（椭圆）。下面的例子展示了一个圆形的径向渐变：

#grad {background-image: radial-gradient(circle, red, yellow, green);
}

 

 使用大小不同的关键字

size参数定义渐变的大小。它可接受四个值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

closest-side：渐变结束形状如果是圆形，与容器距离渐变中心点最近的一边相切，如果是椭圆，则与距离渐变中心点最近的垂直和水平边相切。

closest-corner：渐变结束形状与容器距离渐变中心点最近的一个角相交。

farthest-side： 类似于closest-side，但是结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。

farthest-corner：默认值,渐变的结束形状与容器距离见百年中心点最远的一个角相交。

设置了不同size关键词的径向渐变：

#grad1 {background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}#grad2 {background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

重复径向渐变

repeating-radial-gradient()函数用于重复径向渐变：

#grad {background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

 

CSS阴影效果

通过使用CSS，您可以在文本和元素上添加阴影。

CSS文字阴影

CSS text-shadow 属于为文本添加阴影。最简单的用法是只指定水平阴影（2px）和垂直阴影（2px)：

h1 {text-shadow: 2px 2px;
}

 之后，为阴影添加颜色：

h1 {text-shadow: 2px 2px red;
}

 然后，向阴影添加模糊效果：

h1 {text-shadow: 2px 2px 5px red;
}

 

多个阴影

如需在文本中添加多个阴影，您可以添加逗号用来分隔阴影列表。

h1 {color: white;text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

 您还可以使用text-shadow属性在文本周围创建纯边框（无阴影）：

h1 {color: yellow;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

 

CSS Box Shadow

CSS box-shadow属性应用阴影于元素。最简单的用法是只指定水平阴影和垂直阴影：

div {box-shadow: 10px 10px;
}

 接下来，为阴影添加颜色：

div {box-shadow: 10px 10px grey;
}

 然后，向阴影添加模糊效果：

div {box-shadow: 10px 10px 5px grey;
}

 

卡片

您还可以使用box-shadow属性创建纸质卡片效果：

div.card {width: 250px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-align: center;
}