在 css3出现之前,给一个容器做一个渐变效果的一般做法是 切一张背景图做循环,然而,CSS3的到来,我们可以通过 CSS 来实现,告别图片。
以下就说说不同浏览器实现渐变的方法:
Webkit是第一个支持渐变的浏览器内核(包括 chrome 和 safari ,还有各种webkit内核的浏览器),它使用下面的结构:
语法:
background-image:-webkit-gradient(type,x1 y1,x2 y2,from(开始颜色值),to(结束颜色值),[color-stop(偏移量小数,停靠颜色值),...]);
变量解释:
x1 y1,x2 y2: 为线性渐变的开始点坐标和结束点坐标。x1,x2,y1,y2 的取值范围为 0% – 100%,当x1,x2,y1,y2取值为极值的时候,x1,x2 可以取值 left (0%) 或者 right (100%);同理y1,y2可以取值top (0%) 或者 bottom (100%);
如有疑问or建议可通过以下方式跟我取得联系.
Q Q: | 373435871 |
---|---|
Email: | jackness1208@gmail.com |