站长资讯网
最全最丰富的资讯网站

CSS3中的渐变分为哪几类

css3中的渐变可以分为:1、线性渐变,语法为“linear-gradient(渐变方向,颜色1, 颜色2, …);”;2、径向渐变,语法为“radial-gradient(圆的类型 渐变大小 渐变位置,颜色1,颜色2);”。

CSS3中的渐变分为哪几类

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

CSS3中的渐变分为哪几类

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

  • 径向渐变(Radial Gradients)- 由它们的中心定义

线性渐变

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

创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。

CSS 语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction 用角度值指定渐变的方向(或角度)。

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

示例如下:

<html> <head> <meta charset="utf-8">  <title>123</title>  <style> #grad1 {     height: 200px;     background-color: red; /* 不支持线性的时候显示 */     background-image: linear-gradient(to bottom right, red , yellow); } </style> </head> <body> <h3>线性渐变 - 对角</h3> <p>从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到黄色:</p> <div id="grad1"></div> <p><strong>注意:</strong> Internet Explorer 8 及之前的版本不支持渐变。</p> </body> </html>

输出结果:

CSS3中的渐变分为哪几类

径向渐变

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

径向渐变由中心点定义。

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

CSS 语法

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

shape 确定圆的类型:

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

circle :指定圆形的径向渐变

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

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

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

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

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

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

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

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

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

  • start-color, …, last-color 用于指定渐变的起止颜色。

示例如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>123</title>  <style> #grad1 {     height: 150px;     width: 200px;     background-color: red; /* 浏览器不支持的时候显示 */     background-image: radial-gradient(red, yellow, green); /* 标准的语法(必须放在最后) */ } #grad2 {     height: 150px;     width: 200px;     background-color: red; /* 浏览器不支持的时候显示 */     background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <h3>径向渐变 - 形状</h3> <p><strong>椭圆形 Ellipse(默认):</strong></p> <div id="grad1"></div> <p><strong>圆形 Circle:</strong></p> <div id="grad2"></div> <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>

输出结果:

CSS3中的渐变分为哪几类

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

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号