网站建设的软件知识有哪些内容今日小说搜索百度风云榜
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;
}
