CSS3中的渐变类有哪些-成都快上网建站

CSS3中的渐变类有哪些

这篇“CSS3中的渐变类有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS3中的渐变类有哪些”文章吧。

创新互联是专业的潮阳网站建设公司,潮阳接单;提供网站设计、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行潮阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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,... 用于指定渐变的起止颜色。

示例如下:



 
123 



线性渐变 - 对角

从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到黄色:

注意: Internet Explorer 8 及之前的版本不支持渐变。

输出结果:

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 用于指定渐变的起止颜色。

示例如下:




 
123 



径向渐变 - 形状

椭圆形 Ellipse(默认):

圆形 Circle:

注意: Internet Explorer 9 及之前的版本不支持渐变。

输出结果:

CSS3中的渐变类有哪些

以上就是关于“CSS3中的渐变类有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网站题目:CSS3中的渐变类有哪些
文章链接:http://kswjz.com/article/iiihpi.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯