CSS3中线性颜色渐变的一些实现方法


Posted in HTML / CSS onJuly 14, 2015

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

Webkit

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

CSS Code复制内容到剪贴板
  1. /* 语法,参考自: http://webkit.org/blog/175/introducing-css-gradients/ */  
  2. -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)   
  3. /* 实际用法... */  
  4. background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));    

CSS3中线性颜色渐变的一些实现方法

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

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

Mozilla

Firefox,从3.6版本才开始支持渐变,更喜欢和Webkit略微不同的语法。

CSS Code复制内容到剪贴板
  1. /* 语法,参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */    
  2. -moz-linear-gradient( [ <point> || <angle>,]? <stop>, <stop> [, <stop>]* )    
  3. /* 实际用法*/    
  4. background: -moz-linear-gradient(topredblue);    

CSS3中线性颜色渐变的一些实现方法

    请注意我们将渐变的类型——linear——放到了属性前缀中了
    渐变从哪里开始? (top – 我们也可以使用度数,比如-45deg)
    开始的颜色? (red)
    结束的颜色? (blue)

Color-Stops

如果你不需要从一个颜色到另一个颜色的100%渐变怎么办?这就是color stop起作用的时候了。一个普遍的设计技术是使用一个较短而细微的渐变,比如:
CSS3中线性颜色渐变的一些实现方法

注意顶部的浅灰色到白色的细小的渐变

在过去,标准的做法就是制作一个图片,并将其设为一个元素的背景图片,然后让其水平平铺。然而使用CSS3,这是个小Case。

CSS Code复制内容到剪贴板
  1. backgroundwhite/* 为较旧的或者不支持的浏览器设置备用属性 */     
  2. background: -moz-linear-gradient(top#dededewhite 8%);     
  3. background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white)); border-top1px solid white;    

这次,我们让渐变结束于8%,而不是默认的100%。请注意我们也在头部采用了一个边框,以形成对比。这很常用。

如果我们想要添加多一种(几种)颜色,我们可以这样做:

CSS Code复制内容到剪贴板
  1. backgroundwhite/* 备用属性 */ background: -moz-linear-gradient(top#dededewhite 8%, red 20%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);    

    对于-moz 版本,我们定义,从元素的20%的高度的地方开始是红色。
    而对于-webkit,我们使用color-stop,采用两个参数:哪里开始停止,使用哪种颜色。

HTML / CSS 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 #HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 #HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 #HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 #HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 #HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 #HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 #HTML / CSS
You might like
php.ini 配置文件的深入解析
2013/06/17 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
ie 调试javascript的工具
2009/04/29 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
python输入多行字符串的方法总结
2019/07/02 Python
django创建简单的页面响应实例教程
2019/09/06 Python
如何基于python操作excel并获取内容
2019/12/24 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
2014年公司植树节活动方案
2014/03/04 职场文书
护士毕业实习感言
2014/03/05 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
食品安全演讲稿
2014/09/01 职场文书
加强作风建设心得体会
2014/10/22 职场文书
2014年路政工作总结
2014/12/10 职场文书
审美与表现自我评价
2015/03/09 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
pytorch实现手写数字图片识别
2021/05/20 Python