CSS3颜色渐变是怎么实现的

这篇文章主要介绍“CSS3颜色渐变是怎么实现的”，在日常操作中，相信很多人在CSS3颜色渐变是怎么实现的问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3颜色渐变是怎么实现的”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

CSS3 渐变，渐变是两种或多种颜色之间的平滑过渡。

1. CSS3线性渐变在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或沿任意轴。如果使用过制作 Photoshop等软件，对线性渐变并不会陌生。CSS3制作渐变效果，其实和使用制作软件中的渐变工具没有什么差别。首先指定一个渐变的方向、起始颜色、 结束颜色。具有这三个数就可以制作 一个最简单、最普通的渐变效果。如果制作一个复杂的多色渐变效果，就需要在同一个渐变方向增添多个色 标。 具备这些渐变参数（ 至少三个），各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。浏览器渲染出来的效果就 类似于制作软件设计出来的渐变图像。

：CSS3线性渐变，(linear-gradient)

1，颜色从顶部向底部渐变 简单的方法直接使用“ to top”关键词， 表示第一颜色向第二颜色渐变。 实现类似于“ to top”效果还可以使用角度值“ 0deg”、“ 360deg” 和“- 360deg”。

2，颜色从底部向顶部渐变 关键词“ to bottom” 刚好 与“ to top” 相反， 从底部向顶部实现渐变效果。 也可以使用角度值“ 180deg” 和“- 180deg” 实现同等效果。

3，颜色从左向右渐变“to left”关键词实现了从左向右颜色渐变， 也可以通过角度值“ 90deg” 和“ 270deg”实现。

4，颜色从右向左渐变 “to right” 正好与“ to left” 效果相反。 实现了颜色从右向左直线渐变， 也可以使用角度值“ 90deg” 和“- 270deg”。

5，从右下角向左上角线性渐变 “to top left” 实现从右下角向左角线性渐变。

6，从左下角到右上角线性渐变 “to top right” 关键词实现左下角到右上角的线性渐变。

7，从右上角到左下角线性渐变 “to bottom left” 关键词实现了右上角向左下角直线渐变。

8，从左上角向右下角线性渐变 “to bottom right” 关键词实现了左上角向右下角直线渐变。

CSS3制作渐变按钮

Web页面或者说Web程序应用中， 按钮是设计中的一个重要元素， 也是设计师非常重视的一个设计元素。 设计师借助Photoshop等软件实现按钮效果， 然后通过图片的方式转用到Web页面中或者 Web应用程序中。 这种方法安全、兼容性较强，实现方法也简单，但适应能力比较弱、重用性、可扩展性、 维护性差。例如，修改一个按钮的颜色，必须先从制作软件中修改好，再次切图，最后替换 Web页面中的图片。CSS3 的渐变出现后， Web设计师可以摆脱Photoshop的束缚，特别是在配合CSS3的阴影、圆角和@font- face等属性，可以直接脱离制图软件，直接使用CSS快速 设计各种精巧、靓丽、 细腻的按钮（ 几乎可以和设计软件制作出来的效果一模一样）。 通过CSS3属性制作的按钮与设计软件制作的按钮相比， 有以下几大优势： 

-灵活性、 可扩展性强： 可以通过CSS3的属性可以直接修改按钮的大小、 背景等效 果。 

-可以减少http请求， 提高页面的加载性能。 

-可以应用到任何的HTML标签元素， 如 a、 input、 button、 span 和 div 等。 ·可以支持按钮多种状态效果， 比如当前状态、 悬停状态和点击状态。 

-完全兼容不支持 CSS3 的浏览器， 如果不兼容CSS3， 则显示没有渐变和阴影的普通效果。

：CSS3径向渐变，(radial-gradient)

CSS3径向渐变是圆形或椭圆形渐变。 颜色不再沿着一条直线轴变化， 而是从一个起点朝所有方向混合。 但相对线 渐变要比径向渐变复杂得多。

CSS3 径向渐变的属性参数 

CSS3的径向渐变相对于线性渐变要复杂得多， 属性参数也繁多复杂。 CSS3径向变中新旧语法中的属性参数定义如下: 

1.< position>主要用来定义径向渐变的圆心位置。 此值类似于CSS中background- position属性， 用于确定元素渐变的中心位置。 如果这个参数省略了， 其默认值为 center。 其值主要有以下几种： ·<length>： 用长度值指定径向渐变圆心的横坐标或纵坐标， 可以为负值。 

-percentage>： 用百分比指定径向渐变圆心的横坐标或纵坐标， 可以为负值。 

-center： 设置中间为径向渐变圆心的横坐标值或纵坐标。 

-top： 设置顶部为径向渐变圆心的纵标值。 http:/ /www.iis7.com/b/wzjk/

-right： 设置右边为径向渐变圆心的横坐标值。 

-bottom： 设置底部为径向渐变圆心的纵标值。

-left： 设置左边为径向渐圆心的横坐标值。

2.< shape> 主要用来定义径向渐变的形状。 其主要包括两个值circle 和ellipse： 

-circle： 如果< size> 和< length> 大小相等， 径向渐变是一 个圆形， 也就是用来指定圆形的径向渐变。 

-ellipse： 如果< size> 和< length> 大小不相等， 径向渐变是一个椭圆形， 也就是用来指定椭圆形的径向渐变。

3.< size>用来确定径向渐变的结束形状大小。 如果省略， 其默认值为 farthest- corner。 可以给其显式地设置一些关键词。 

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

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

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

-farthest- corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角。 如果< shape>设置 为circle或者省略，< size> 可能显式设置为< length>。 表示用长度值指定径向渐变的横向或纵向直径 长度， 并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆， 不能为负值。

4.< color- stop> 径向渐变线上的停止颜色， 类似于线性渐变的< color- stop>， 渐变线从中心点向右扩散。 其中0%表示渐变线的起始点， 100%表示渐变线的与渐变容器相交结束的位置， 而且其 颜色停止可以定义一个负值。

：CSS3重复线性渐变

可以使用重复线性渐变repeating-linear-gradient 属性代替线性渐变linear-gradient。 它们采取相同的值， 但色标在两个方向上都无限重复。 不过使用百分比设置色标的位置没有多大的意义， 但 使用像素和其他的单位重复线性渐变可以创建一些很酷的效果，

：CSS3重复径向渐变

以同样的方式， 使用相关的属性创建重复的径向渐变， 其语法和radial- gradient 类似， 只是以一个径向渐变为基础进行重复渐变，

在CSS3中渐变特性主要包括以下四种： 

线性渐变（ linear- gradient）、

径向渐变（ radial- gradient）、 

重复线性渐变（ repeating- linear- gradient） 

重复径向渐变（ repeating- radial- gradient） 其中线性渐变和重复线性渐变语法相同， 而径向渐变和重复径向渐变的语法相同。 

从本质上说， 渐变就是背景属性中的background-image， 浏览器直接将渐变生成图片， 可以直接使用 CSS 背景属性来控制它们。

到此，关于“CSS3颜色渐变是怎么实现的”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！