代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > css技巧 > 使用CSS3渐变代替图片制作背景渐变效果

使用CSS3渐变代替图片制作背景渐变效果

css技巧 围观4326次 更新日期:2017-07-03 14:54:27 留下足迹

为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不会持续太久。多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变。在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。

Webkit

尽管Mozilla和Webkit通常对CSS3属性采取同样的语法,但是对于渐变,他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核,它使用下面的结构:

/* Syntax, taken from: http://webkit.org/blog/175/introducing-css-gradients/ */ 
-webkit-gradient(, [, ]?, [, ]? [, ]*)  
 
/* In practice... */ 
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); 

 

不要担心这些语法会让你看花眼,我也是这样的!只要记得我们需要用一个逗号来隔开这个参数组。

  • 渐变的类型? (linear)
  • 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
  • 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
  • 开始的颜色? (from(red))
  • 结束的颜色? (to(blue))

转载请注明:代码学堂>web前端 > css技巧 > 使用CSS3渐变代替图片制作背景渐变效果

喜欢 (273) or 分享 (269)
随机文章