线性渐变:ie6以下不兼容
径向渐变:只支持firefox、Chrome和Safari
Background Color
注意:background-image 可以写 background
我自己在网页中写的径向渐变兼容代码 :firefox、chrome、IE10、IE10+、safari(background-image老式写法)兼容
background: rgb(98, 37, 140);background:-webkit-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));background-image: -webkit-gradient(radial,50% 0%,0,50% 55%,90,from(rgb(160, 114, 193)),to(rgb(98, 37, 140)));/* Safari 4-5, Chrome 1-9 */background:radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));background:-moz-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));background:-ms-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));
线性渐变兼容代码 :firefox、chrome、IE10、IE10+、safari兼容
background: rgb(247, 100, 14);background:-webkit-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));/* safari,chrome*/background:linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));background:-moz-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));background:-ms-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));
附图
径向
线性