(HTML5) 第六章 CSS3

最好不要在自己的网页中使用多色边框。

查找css3特性是否需要开发商前缀（-moz-radial-gradient(circle,green,yellow)），可求助于网址 http://caniuse.com

尝试用js文件自动添加css前缀功能，下载-prefix-free，可访问地址： http://leaverou.github.io/prefixfree

透明

· rgba(x,y,x,alpha)

· opacity

大多情况建议使用opacity

圆角

border-radius

border-top-right-radius

背景

background-image

background-position:left top

background-repeat:no-repeat/repeat-x

阴影

盒子阴影  

box-shadow:5px 5px 10px 5px  rgba(0,0,0,0.5) inset

水平/垂直偏移量，模糊距离，伸展范围，元素内部创建阴影

文本阴影

text-shadow:gray 10px 10px 7px;

ps:我们可以为同一个元素添加多个阴影，只要把每个阴影值列表用逗号分隔开即可，但这种阴影控通常是浪费时间和电能

渐变

线性渐变 background:linear-gradient(from top left,red 0%,orange 20%,yellow 80%);

放射性渐变 background:radial-gradient(circle at 90% 5%,yellow,green)

循环渐变 repeat- radial-gradient;repeat-linear-gradient

在线生成渐变代码的工具：

CSS Gradient Generator

CSS Gradient Background Maker

过度 

transition:opacity 10s ease-in-out; 在IE9中有问题

速度函数 ease-in-out/linear/ease-out/ease-in/cubic-bezier

推迟时间  transition:opacity 10s ease-in-out 0.1s;

变换 transform

transform-origin 设定变换一动点；左上角：0% 0% 右上角100% 0%

变换和过渡天生一对

http://css3.bradshawenterprises.com/transforms/#css3dtransforms

ps:3d效果，主要是应用了rotateY() \rotateX()\rotateZ()达到效果的

自定义字体 font-face :

用这个功能并且支持大部分浏览器的话，需要将字体制作成多种格式。最佳实践方案是包含一个WOFF文件（在现代浏览器上性能最好）、一个EOF文件（兼容旧版ie）以及一个TTF或者OTF文件（兼容ANDROID和旧版的非ie浏览器）， 最好再为 旧版IPAD和iphone提供一个低质量的svg文件。WOFF（web open font format）格式，唯一一个面向未来的字体格式，比较新的浏览器都支持。若觉得维护困难，则可以只提供TTF和OTF格式的文件，可以支持大部分浏览器。

获取免费字体最好的地方--Font Squirrel;获取文件之后，进入 generator，上传文件，点击download your kit，就可以得到字体包了。将其解压后放入网页所在文件夹 下，然后 再网页里面定义样式(为了注册字体)：

@font-face{
font-family:'xxxx';
src:url(xxxx.eot);
src:local('xxxx'),
url('xxxx.woff') format('woff'),
url('xxxx.ttf') format('truetype'),
url('xxxx.svg') format('svg')}

关键是，需要理解字体许可，（不是所有桌面提供的字体都可以用于网站上，因为作为提供字体的微软或者苹果厂商他们是为字体付费的）

还有一种方式是用谷歌的工具，这里就不详细说明了

多栏文本

.Content{
	text-align:justify;/*两端对齐*/
	-moz-colum-width:10em;
	-webkit-colum-width:10em;
	-colum-width:10em;
        -colum-rule:1px solid red /*设置分隔线*/
        -colum-span:all/*让元素横跨所有列的总宽度*/
}

知识补充：

1em等于两倍字体大小，比如12像素的字体，1em就相当于24像素
页面布局的几种方式 ：流式布局（%）、固定宽度布局（px）、弹性布局（em）、混合布局