一.css3
各浏览器适用前缀
-webkit- 谷歌和苹果
-o- 欧朋
-moz-火狐
-ms- IE9
css3圆角边框
border-radius 属性用于创建圆角
length 定义圆角的形状。
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
css3边框阴影
box-shadow 用于向方框添加阴影
以XY轴默认X为右边边框Y为下边边框
div
{
box-shadow: 10px 10px 5px #888888 inset;
}
5PX表示阴影程度
inset表示内部阴影默认不写表示外部
CSS3边框图片
border-image 属性，您可以使用图片来创建边框
#round
border-image:url(../i/border.png) 30 30 round;
#stretch
border-image:url(../i/border.png) 30 30 stretch;
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
css3背景
length 定义圆角的形状。
CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
CSS3 background-origin 属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
background-clip 属性规定背景的绘制区域。
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
**！！**
css3 文本效果
text-shadow 可向文本应用阴影。
CSS3 自动换行
word-wrap 属性允许您允许文本强制文本进行换行
p {word-wrap:break-word;}
text-overflow 规定当文本溢出包含元素时发生的事情。
overflow:hidden;隐藏
text-overflow:ellipsis
This is some long text...
text-overflow:clip
This is some long text t
加hover效果
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
text-outline 属性规定文本轮廓。
thickness 必需。轮廓的粗细。
blur 可选。轮廓的模糊半径。
color 必需。轮廓的颜色。
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件
请通过 font-family 属性来引用字体的名称 (myFirstFont)
<style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
url(‘Sansation_Light.eot‘); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
使用粗体文本
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Bold.ttf‘),
url(‘Sansation_Bold.eot‘); /* IE9+ */
font-weight:bold;
}
font-weight font-style
2D
translate()
rotate()
scale()
skew()
matrix()
1.transform: rotate(30deg);旋转30度。元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
2.transform: translate素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform: translate(50px,100px);
3.transform:scale元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform: scale(2,4);
4.transform:skew元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform: skew(30deg,20deg);skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
5.transform:matrix 将 div 元素旋转 30 度 这个不管
6.transform:origin 设置旋转元素的基点位置transform: rotate(45deg);transform-origin:20% 40%;transform-origin 允许你改变被转换元素的位置。
3D
1.rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
transform: rotateX(120deg);
2.rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
transform: rotateY(130deg);
css3过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
应用于宽度属性的过渡效果，时长为 2 秒：
transition: width 2s;
如果时长未规定，则不会有过渡效果，因为默认值是 0。
CSS 属性改变的典型时间是鼠标指针位于元素上时
div:hover
{
width:300px;
}
当指针移出元素时，它会逐渐变回原来的样式。
向宽度、高度和转换添加过渡效果：
transition: width 2s, height 2s, transform 2s;
transition-duration 定义过渡效果花费的时间。默认是 0。
CSS3动画
在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。规定动画的名称 ；规定动画的时长 .
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒
animation: myfirst 5s;
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器
例子；
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变
@keyframes myfirst
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
改变背景色和位置
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-delay 规定动画何时开始。默认是 0。
animation-name 规定 @keyframes 动画的名称。
@keyframes 规定动画。
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
简写animation: myfirst 5s linear 2s infinite alternate;
BFC
：块 级格式化上下文
1，独立的渲染区域
2，与这个区域外部毫不相干
3，需要触发（声明独立）
、根元素
、float属性不为none浮动
、position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
、overflow不为visible，
overflow：hidden来声明建议用这个触发
BFC的区域不会与float box重叠
BFC就是?页?面上的?一个隔离的独?立容器，容器?里?面的?子元素不会影响到外?面的元素。
计算BFC的?高度时，浮动元素也参与计算
因为BFC内部的元素和外部的元素绝对不会互相影响，
因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，?而不与浮动有重叠
当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算?高度
时会包括浮动的?高度。避免margin重叠也是这样的?一个道理
IFC
：行文格式化上下文
也叫line box
当?一?行中?行内宽度的总和?小于包含它们的?行框的宽，它们在?水平?方向上的对?齐，取决于"text-align"特性。如果其值是”justify“，
?用户端也可以拉伸?行内框（除了”inline-table“和”inline-block“框）中的空间和?文字。
通配符*{margin:0
padding:0
}
主流浏览器CSS 3和HTML 5兼容清单
一.浏览器兼容问题?一：不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写?几个标签，不加样式控制的情况下，各?自的margin 和padding差异较?大。
解决?方案：CSS?里 *{margin:0;padding:0;}
二
块属性标签float后，?又有横?行的margin情况下，在IE6显?示margin?比设置的?大
解决?方案：在float的标签样式控制中加?入 display:inline;将其转化为?行内属性
三
解决?方案：在float的标签样式控制中加?入 display:inline;将其转化为?行内属性
解决?方案：给超出?高度的标签设置overflow:hidden;或者设置?行?高line-height ?小于你设置的?高度。
四
?行内属性标签，设置display:block后采?用float布局，?又有横?行的margin的情况，IE6间距bug
在display:block;后?面加?入display:inline;display:table;
五
?子元素绑架?父元素的margin-top
解决?方案：在?父元素和?子元素之间加?入<div stye=‘height:0’> </div>。或者设置?父元素的padding-top。
六
图?片默认有间距
问题症状：?几个img标签放在?一起的时候，有些浏览器会有默认的间距，加了问题?一中提到的通配符也不起作?用。
解决?方案：使?用float属性为img布局
七
标签最低?高度设置min-height不兼容
问题症状：因为min-height本?身就是?一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
解决?方案：如果我们要设置?一个标签的最?小?高度200px，需要进?行的设置为：{min-height:200px; height:auto !important;height:200px; overflow:visible;}
2.条件注释
<!--[if lte IE 6]> 这段?文字仅显?示在 IE6及IE6以下版本。 <![endif]-->
<!--[if gte IE 6]> 这段?文字仅显?示在 IE6及IE6以上版本。 <![endif]-->
<!--[if gt IE 6]> 这段?文字仅显?示在 IE6以上版本（不包含IE6）。 <![endif]-->
<!--[if IE 5.5]> 这段?文字仅显?示在 IE5.5。 <![endif]-->
<!--在 IE6及IE6以下版本中加载css-->
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
**CSS HACK区别IE6、IE7、IE8、Firefox兼容性问题**
1.区别IE和?非IE浏览器
#tip{ background:blue;/*?非IE背景藍?色*/ background:red\9;/*IE6、IE7、IE8背景紅?色*/
2.区别IE6,IE7,IE8,FF
【区别符号】：「\9」、「*」、「_」
3.区别IE6、IE7、Firefox
【区别符号】：「*」、「_」
原文：http://www.cnblogs.com/ai6962204/p/5326627.html