IT兄弟连 HTML5教程 CSS3属性特效 渐变1
渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来，Web设计师都是通过图形软件设计这些渐变效果，然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果，仅从页面的视觉效果上来看，与设计并无任何差异。事实上这种方法是比较麻烦的，因为首先需要设计师进行设计，然后进行切图，在通过样式应用到页面中。另外，在实际应用中可扩展性差，还直接影响页面性能。值得庆幸的是，W3C组织将渐变设计收入到CSS3标准中，让广大的前端设计师直接受益，可以直接通过CSS3的渐变属性制作类似渐变图片的效果。而且渐变属性慢慢得到了众多现代浏览器的兼容，甚至是烦人的IE，在IE10版本也支持了这个属性。
CSS3 Gradient分为linear-gradient（线性渐变）和radial-gradient（径向渐变）。
1 CSS3渐变介绍
欲要了解CSS3渐变，就先要知道CSS3渐变是什么？从早前的设计中我们可以知道，渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中，可以指定多个中间颜色值，这个值称为色标。每个色标包含一种颜色和一个位置，浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变。如下图所示：
渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url() 值的地方采用，比如最常见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止，仅在背景图片中得到最完美的支持。
2 线性渐变
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，那你对线性渐变并不会陌生。
CSS3制作渐变效果，其实和使用制作软件中的渐变工具没有什么差别。首先需要指定一个渐变的方向、渐变的起始颜色、渐变的结束颜色。具有这三个参数就可以制作一个最简单、最普通的渐变效果。如果你需要制作一个复杂的多色渐变效果，就需要在同一个渐变方向增添多个色标。具备这些渐变参数（至少三个），各浏览器就会绘制与渐变线垂直的颜色结来填充整个容器。浏览器渲染出来的效果就类似于制作软件设计出来的渐变图像，从一种颜色到另一种颜色的平滑淡出，沿所指的线性渐变方向实现颜色渐变效果。
线性渐变的格式如下：
linear-gradient([<起点> || <角度>,]? <点>，<点>…)
线性渐变的参数描述如表1：
表1 CSS3线性渐变参数描述
最新文章
- 【BZOJ 4582】【Usaco2016 Open】Diamond Collector
- Oracle监听器启动出错：本地计算机上的OracleOraDb11g_home1TNSListener服务启动后又停止了解决方案
- 网络-->监控-->OID-->BGP
- Spring绑定表单数据
- Web Essentials之Browser Link
- 使用dig查询dns解析
- Sharepoint2013切换用户菜单
- python-socket.error[10054]:对象的复制
- 自定义手势_GestureOverlayVIew
- 已知TSP问题的最好解
- Tomcat学习笔记 - 错误日志 - NetBeans配置tomcat出错情况总结 -- 尚未授予访问 Tomcat 服务器的权限。请在服务器管理器的 Tomcat 定制器中设置 "manager-script" 角色的正确用户名和口令。 有关详细信息, 请查看服务器日志。
- struts2知识点复习
- Android-第三天
- cmseasy CmsEasy_5.6_20151009 无限制报错注入（parse_str()的坑）
- PHP性能优化：in_array和isset 在大数组查询中耗时相差巨大，以及巧妙使用array_flip
- JQuery Checkbox 获取多选值 Checkbox选中个数
- primo驱动启动顺序
- httpd基础知识
- linux命令学习之：chown
- Establish a website in 5 minutes