发布时间 : 星期日 文章CSS3主要知识点总结+HTML5新标签（图文版）更新完毕开始阅读
总结+HTML5新增标签
目录： 1、CSS 属性编写顺序 2、CSS3属性（内核前缀） 3、position相对/绝对定位 4、overflow：scroll等的区别 5、display属性应用 6、盒模型计算方法和Bug 7、CSS3新增加的结构标签 8、蒙版，变形，过渡，动画等CSS3效果
1、显示属性，自身属性，文本属性 推荐样式编写顺序 1 显示属性 ：display，list-style，position，float，clear [注意按照横着的顺序] 2 自身属性（合模型）：width，height，margin，padding，border，background（第3点） 3 背景：background 4 行高：line-height 5 文本属性：color,font，text-decoration，text-align，vertical-align，white-space，content 6 其他 cursor/z-index/zoom 7 css3属性：trandsform/transition/animation/box-shadow/border-radius 8 链接的样式请严格按照如下顺序添加： a:link-->a:visited-->a:hover-->a:active(LoVeHAte) * 书写的CSS代码的时候请注意按照显示 自身 文本的书写顺序来书写！
分享2014-4-1 HTML5上课笔记
2、CSS3属性（内核前缀） Mozilla 内核 css前缀-moz; WebKit 内核 css前缀-webkit ;（谷歌已换用blink内核） Opera 内核 css前缀 -o ; （欧朋已换用blink内核） Trident 内核 css前缀 -ms ; CSS3新属性： 1）边框 ① border-colors 相关属性 border-top-colors border-right-colors border-bottom-colors border-left-colors ② border-image ： stretch 拉伸方式来填充边框背景图 | repeat 平铺 图片碰到边界时超出截断 | round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框 ③ border-radius 相关属性 border-radius: 1-4 length | % / 1 border-radius数值为合模型的一半就变成圆 ，记住：不是相对于合模型的width（如：965x1611）， 而是整个框才是 结果就显示的不是正圆，所以border-radius: 300px; 才能显示正圆，加上border的值 '/'前面表示水平方向，后面表示垂直方向。每个方向都可以用1~4个值，缩写的规则遵循?左上开始， 顺时针旋转/ 只能写一个 2）阴影 1.文本阴影 text-shadow（不需要判断浏览器） text-shadow:2px 3px 2px #000; 文字阴影的结构是按照以下顺序：X--偏移，Y--偏移，模糊，和颜色; text-shadow:-2px -3px 2px rgba(0, 118, 160, .25); 设置为负值，X -偏移阴影转移到左侧。设置为负值偏移Y -转移阴影顶端。颜色可以用RGBA值。 text-shadow:0px 1px 0px #fff,0px -p1x 0px #000； 文字阴影的列表（以逗号分隔）,1px的顶部和底部1px的阴影。 text-shadow：水平偏移量 垂直偏移量 阴影模糊值 颜色， 水平偏移量 垂直偏移量 阴影模糊值 颜色；（多个阴影用，隔开） eg： .con2 p { font-size: 90px; color:#fff; text-shadow: -1px -1px 1px rgba(0,0,255,1), -2px -2px 1px rgba(0,0,254,0.5), -6px -6px 10px rgba(0,0,252,0.2); } 2.盒阴影 box-shadow（不需要判断浏览器） 盒阴影的使用语法结构与文本阴影类似，如box-shadow: 5px 5px 5px rgba(255,15,255,0.5); 但是，盒阴影多了个属性：外延值，inset， 如box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset; 补充个知识点： background:transparent; 等价 background:rgba(0,0,0,0); color: transparent; 等价 color:rgba(0,0,0,0); 3）背景图 1.CSS3蒙版（需要判断浏览器） 实现上面的效果，需要用到一张蒙版图，注意这张图中间不透明，跟平时PS设计蒙版不一样，