css3如何实现颜色渐变效果-LMLPHP

css3渐变有两种类型:css3线性渐变和css3径向渐变。

(学习视频分享:css视频教程

一、线性渐变颜色渐变

函数:

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

语法:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
登录后复制

值:

  • direction 用角度值指定渐变的方向(或角度)。

  • color-stop1, color-stop2,... 用于指定渐变的起止颜色。

举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Work网</title>
<style>
#grad1{
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法(必须放在最后) */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>
登录后复制

二、径向渐变

函数;

radial-gradient() 函数用径向渐变创建 "图像"。

径向渐变由中心点定义。

为了创建径向渐变你必须设置两个终止色。

语法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
登录后复制

值:

1、shape 确定圆的类型

  • ellipse (默认): 指定椭圆形的径向渐变。

  • circle :指定圆形的径向渐变

2、size 定义渐变的大小,可能值:

  • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

  • closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边

  • closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角

  • farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边

3、position 定义渐变的位置。可能值:

  • center(默认):设置中间为径向渐变圆心的纵坐标值。

  • top:设置顶部为径向渐变圆心的纵坐标值。

  • bottom:设置底部为径向渐变圆心的纵坐标值。

4、start-color, ..., last-color 用于指定渐变的起止颜色。

举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Work网</title>
<style>
#grad1{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法(必须放在最后) */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>
登录后复制

相关推荐:CSS教程

以上就是css3如何实现颜色渐变效果的详细内容,更多请关注Work网其它相关文章!

09-18 00:02