10Oct

CSS3的渐变背景语法书写

2018-10-10 09:17:54

线性渐变(从上到下)
 
 
#miodiv {
/* fallback */
 
background-color:#1a82f7;
 
/ * Safari 4-5,Chrome 1-9 * /
 
background:-webkit-gradient(linear,0%0%,0%100%,from(#1a82f7),to(#2F2727));
 
/ * Safari 5.1,Chrome 10+ * / 
background:-webkit-linear-gradient(top,#2F2727,#1a82f7);
 
/ * Firefox 3.6+ * / 
background:-moz-linear-gradient(top,#2F2727,#1a82f7);
 
/ * IE 10 * / 
background:-ms-linear-gradient(top,#2F2727,#1a82f7);
 
/ * Opera 11.10+ * / 
background:-o-linear-gradient(top,#2F2727,#1a82f7);
 
}
 
线性渐变(从左到右)
 
 
#miodiv {
/* fallback */
 
background-color:#1a82f7;
 
/ * Safari 4-5,Chrome 1-9 * /
 
background:-webkit-gradient(linear,left top,right top,from(#1a82f7),to(#2F2727));
 
/ * Safari 5.1,Chrome 10+ * / 
background:-webkit-linear-gradient(left,#2F2727,#1a82f7);
 
/ * Firefox 3.6+ * / 
background:-moz-linear-gradient(left,#2F2727,#1a82f7);
 
/ * IE 10 * / 
background:-ms-linear-gradient(left,#2F2727,#1a82f7);
 
/ * Opera 11.10+ * / 
background:-o-linear-gradient(left,#2F2727,#1a82f7);
 
}
 
径向渐变(以全尺寸为中心)
 
 
#miodiv {
/* fallback */
background-color: #1a82f7;
 
/ *的Safari 5.4,铬1.9 * / 
背景:WebKit的梯度(径向,中心为中心,0,中心为中心,460,从(#1a82f7)至(#2F2727));
 
/ * Safari 5.1,Chrome 10+ * / 
background:-webkit-radial-gradient(circle,#1a82f7,#2F2727);
 
/ * Firefox 3.6+ * / 
background:-moz-radial-gradient(circle,#1a82f7,#2F2727);
 
/ * IE 10 * / 
background:-ms-radial-gradient(circle,#1a82f7,#2F2727);
 
/ * Opera不支持径向渐变... * /
 
}

友情链接:    750彩票登陆   盛弘彩票   北京pk10冠军技巧   国民彩票可信么   e乐彩彩票技巧