CSS3中的渐变类有哪些
CSS3中的渐变类有哪些
这篇“CSS3中的渐变类有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS3中的渐变类有哪些”文章吧。
css3中的渐变可以分为:1、线性渐变,语法为“linear-gradient(渐变方向,颜色1, 颜色2, ...);”;2、径向渐变,语法为“radial-gradient(圆的类型 渐变大小 渐变位置,颜色1,颜色2);”。
本教程操作环境: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><metacharset="utf-8"><title>123</title><style>#grad1{height:200px;background-color:red;/*不支持线性的时候显示*/background-image:linear-gradient(tobottomright,red,yellow);}</style></head><body><h4>线性渐变-对角</h4><p>从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到黄色:</p><divid="grad1"></div><p><strong>注意:</strong>InternetExplorer8及之前的版本不支持渐变。</p></body></html>
输出结果:
径向渐变
radial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中心点定义。
为了创建径向渐变你必须设置两个终止色。
CSS 语法
background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);
shape确定圆的类型:
ellipse (默认): 指定椭圆形的径向渐变。
circle :指定圆形的径向渐变
size定义渐变的大小,可能值:
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边
position定义渐变的位置。可能值:
center(默认):设置中间为径向渐变圆心的纵坐标值。
top:设置顶部为径向渐变圆心的纵坐标值。
bottom:设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color用于指定渐变的起止颜色。
示例如下:
<!DOCTYPEhtml><html><head><metacharset="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><h4>径向渐变-形状</h4><p><strong>椭圆形Ellipse(默认):</strong></p><divid="grad1"></div><p><strong>圆形Circle:</strong></p><divid="grad2"></div><p><strong>注意:</strong>InternetExplorer9及之前的版本不支持渐变。</p></body></html>
输出结果:
以上就是关于“CSS3中的渐变类有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注恰卡编程网行业资讯频道。