CSS3的出现为我们提供了一些能够改变网页样式的全新属性,渐变属性便是其中之一。渐变可用于设置物体从一种颜色渐变至另一种颜色的过渡效果。
渐变属性可以使用以下格式来设置:
/* 线性渐变 */ background: linear-gradient(direction,color-stop1,color-stop2,...); /* 径向渐变 */ background: radial-gradient(shape size,start-color,...,last-color);
其中direction指定线性渐变的方向,可选值包括to top、to right、to bottom以及to left。
color-stop表示颜色在渐变中所处的位置,取值范围为0到100%,例如:
background: linear-gradient(to right,red,blue); background: radial-gradient(circle,red 20%,blue 80%);
以上代码分别表示从左向右的线性渐变,以及从中心向外放射的径向渐变。
由于渐变属性在不同的浏览器中支持程度不尽相同,我们需要考虑浏览器的兼容性,例如以下两行代码:
background: -webkit-linear-gradient(red,yellow); background: -moz-linear-gradient(red,yellow);
其中借助了浏览器前缀来实现渐变效果的兼容性处理,第一行代码为Safari和Chrome浏览器所需的前缀,而第二行则为Firefox浏览器所需的前缀。