CSS3主要知识点总结+HTML5新标签(图文版).docx

总结+HTML5新增标签目录：1、CSS 属性编写顺序2、CSS3属性（内核前缀）3、position相对/绝对定位4、overflow：scroll等的区别5、display属性应用6、盒模型计算方法和Bug7、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 平铺，图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框?style? ? .wrap {? ? ? ? height: 100px;? ? ? ? width: 100px;? ? ? ? border: 20px solid;? ? ? ? /*border-image: url(border-image.png) 30 30 repeated;简写形式*/? ? ? ? border-image: url(border-image2.png) repeat;? ? ? ? border-image-slice:30 30;? ? ? ? text-align: center;? ? ?}?/style③ border-radius ?相关属性?border-radius: 1-4 length | % / 1? ?border-radius数值为合模型的一半就变成圆 ，记住：不是相对于合模型的width（如：965x1611），? ? 而是整个框才是? ? ?style? .wrap {? height: 500px;? width: 500px;? border: 50px solid;? border-radius:?250px;? }? /style结果就显示的不是正圆，所以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