网站建设中CSS发展演变~

2019-02-04 浏览次数：1945

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

浏览器支持

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

后边跟 -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 线性渐变

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

线性渐变的实例：

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-05

企业网站建设状况分析 2020-01-16

网站建设中CSS发展演变~

cases/ 案例

农业小程序

点餐小程序解决方案

医疗行业小程序

自始至终提供帮助