最好不要在自己的网页中使用多色边框。
查找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 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)、混合布局