网站建设中CSS发展演变~

2019-02-26 浏览次数：1527

网站建设中为了提高用户对网站的访问响应速度，以及浏览器的不断升级，越来越多的图形，渐变，取代了原来采用图片才能实现的特效。

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

属性
linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-
repeating-linear-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-
repeating-radial-gradient	10.0	26.0 10.0 -webkit-	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.6 -o-

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

线性渐变

实例

一个重复的线性渐变：

		#grad {

  /* Safari 5.1 - 6.0 */

  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

  /* Opera 11.1 - 12.0 */

  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);

  /* Firefox 3.6 - 15 */

  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

  /* 标准的语法 */

  background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

您当前浏览的文章：《网站建设中CSS发展演变~》由上海觉策信息技术有限公司旗下小程序开发服务品牌《觉策小程序》整理发布，文章题材来源于网络如有侵权请联系：info@jc-dl.net 删除！转载请注明：https://www.jc-dl.net/news/con/40.html

无线商机之互联网+ 2019-02-25

企业网站建设状况分析 2020-04-07

网站建设中CSS发展演变~

浏览器支持

CSS3 线性渐变

实例

cases/ 案例

点餐小程序解决方案

医疗行业小程序

订水小程序-海事大

自始至终提供帮助