龙空技术网

CSS3渐变gradient

栗子纪 122

前言:

此时兄弟们对“css颜色过渡”可能比较着重,你们都需要剖析一些“css颜色过渡”的相关文章。那么小编也在网摘上网罗了一些有关“css颜色过渡””的相关知识,希望大家能喜欢,姐妹们一起来了解一下吧!

概念:CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。线性渐变:

语法:

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

说明:direction:默认为to bottom,即从上向下的渐变; 还可以设置为度数。自上向右 (0度 —— 90度的变化) -- 旧的标准是相反 自右而上 ( 90—— 0)stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。

径向渐变:从一个点想四周的渐变

语法一:

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

注:shape和size 不能一起使用;

语法二:

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

注:shape size at position 这几个属性之间不用逗号隔开,可以一起显示。

position:渐变起点的位置,可以为百分比,默认是图形的正中心。

shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。

size:渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角。

浏览器前缀:

-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀-moz- -moz-box-shadow 所有基于Gecko引擎的浏器(如Firefox)专属的CSS属性需添加-moz-前缀 -o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器(如Chrome、Safari)专属的CSS需添加-webkit-前缀

标签: #css颜色过渡