Question

我发现这个谎言：

background-image: -moz-linear-gradient(center top, #B6D3F4, #5483B8);

我假设第2和第3个参数是渐变的开始和结束颜色，但第一个参数“中心顶部”究竟是什么意思？

鉴于-moz-linear-gradient明显特定于Mozilla，这个规则的等效CSS3标准版本是什么？

Answer 1

请查看MDN。如果我读得对，你可以忽略前缀。

＆LT;并排或角＆GT;

表示渐变线起点的位置。它由两个关键字组成：第一个表示水平侧，左侧或右侧，第二个表示垂直侧，顶部或底部。订单不相关，每个关键字都是可选的。

顶部，底部，左侧和右侧的值分别转换为角度0度，180度，270度，90度。其他的被转换成一个角度，使得起点与所描述的角落处于同一象限，并且由起点和角落定义的线垂直于梯度线。这样，＆lt; color-stop＆gt;描述的颜色。将完全适用于角点。这有时被称为“魔角”属性。渐变线的终点是中心框另一个方向上起点的对称点。

Answer 2

适用于所有浏览器：

background: #b6d3f4; /* Old browsers */
background: -moz-linear-gradient(top,  #b6d3f4 0%, #5483b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6d3f4), color-stop(100%,#5483b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* IE10+ */
background: linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6d3f4', endColorstr='#5483b8',GradientType=0 ); /* IE6-9 */

css线性渐变规则

2 个答案: