ABookApart.CSS3.For.Web.Designers学习笔记.pdf

人人为我，我为人人！/ladeng6666 CSS3.For.Web.Designers 学习笔记 By ladeng6666(拉登) 拉登曰：CSS3如是也 CSS3最重要的一点，在用户体验方面，有了很大的提升，这让很多不懂 JS或 Flash的美工人员，可以轻松创建动 画、缓动等效果。用户体验有什么用？为什么要有好的用户体验。原因就像为什么大家都喜欢 iPhone，喜欢 Android 一样，不需要解释，就是喜欢。 本书作者一直强调的一个学习理念：不要值看技术文档、参考书，要从实例中去巩固并挖掘更多的知识。 CSS3之美化篇 CSS3新增了很多美化效果，如：圆角、阴影、模糊、透明度等等，接下来，我们逐个进行学习： border-radius： 设置矩形盒模型圆角效果 CSS代码 #panel{ border-radius: 50px; } HTML代码 div id=panelpborder-radius/p/div text-shadow： 添加文字阴影效果 CSS代码 #panel{ text-shadow: 5px 5px 5px black; /*参数的含义分别是：x偏移量 y偏移量 模糊量 投影颜色*/ } 人人为我，我为人人！/ladeng6666 HTML代码 p id=paneltext-shadow/p box-shadow： 为盒模型标签添加投影效果；用法与 text-shadow相同 CSS代码： #panel{ box-shadow: 5px 5px 5px black; /*参数的含义分别是：x偏移量 y偏移量 模糊量 投影颜色*/ } HTML代码： div id=panelbox-shadow/div background： 多图背景；CSS3中升级了 background属性，可以用多个图像设置页面背景，每个图像之间用逗号间隔 CSS代码： #panel{ border-radius: 50px; text-shadow:0px 0px 5px rgba(0,0,0,0.7); background: url(“http://jsrun.it/assets/7/9/d/n/79dnY.png”) repeat-x, url(“http://jsrun.it/assets/s/8/k/T/s8kTO.png”) repeat-y, url(“http://jsrun.it/assets/5/K/C/F/5KCF4.jpg”); } HTML代码： div id=panelmultiple brbacground image/div 人人为我，我为人人！/ladeng6666 opacity： 设置标签或字体填充内容的透明度，可以是 0到 1之间的数组。另外还可以通过 rbga(red,green,blue,alpha)来设置 同样的效果，其中 alpha的用法与 opacity一样 CSS代码： p{ opacity: 0.6;/*或者用 rgba(255,0,0,0.6);*/ } HTML代码： div id=panelset the font popacity/p/div 有些样式属性还存在争议或者尚未被W3C组织许可，而这些属性又符合目前Web使用的惯例。这种情况下，浏 览器内核厂商会在这类属性前加上前缀进行标示，实现对该浏览器的支持，如： -webkit-border-radius 或许等这些属性都成为了规范，厂商的前缀就可以完全取消了。 每个浏览器内核厂商的前缀举例说明如下： ? safari: -webkit- ? Firefox：-moz- ? Chrome： -chrome- ? IE： -ms- ? Opera： -o- 例如： .foo{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } 记住把没有前缀的属性放到最后，以提升它的优先级，因为不久的将来，这些属性将成为一种规范，那么有争议 的实验性属性将被最后一个属性覆盖。 gradient：渐变填充 在以往的页面中，渐变填充只能预先在 photoshop里绘制好渐变图片，然后用该图片作为页面的背景实现。CSS3 新增了 gradient属性，可以轻松实现渐变填充背景，它可以应用在任何可以应用图像背景的属性上，如：