20150722 CSS3学习总结（上）

1.兼容：
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。
chrome safari:-webkit
firefox:-moz
IE:-ms
opera:-o

eg:transform-style: -webkit-transform-style: preserve-3d;

2、动画
animation需要一个动画名（animation-name），@keyframes的存在就是来实现这个。

@keyframes（关键帧）定义一个动画，并定义具体的动画效果，

3、常用

圆角效果border-radius 左上右上右下左下

块阴影box-shadow 一或多
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];投影方式（内部投影inset或外部投影）可以写在参数的第一个或最后一个，其它位置是无效的。
文本阴影text-shadow:X-Offset(水平偏移距离) Y-Offset（垂直偏移距离） blur（阴影模糊程度 越大越模糊） color（阴影颜色）;


色彩hsl cmyk hsla rgba
rgba:color:rgba(R,G,B,A)RGB:0-255,A透明度0-1不为负。


渐变效果CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
linear-gradient(to bottom,#fff,#999)
渐变类型（渐变方向/角度0deg下至上to top/90deg左至右top right/180deg(默认)上至下to bottom/270deg右至左to left/右下至左上to top left/左下至右上to top right，颜色起始点/多个，颜色结束点/多个）


个性化字体@Font-Face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体
@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}引用时font-family字体名称与上述相同


边框背景图 background:url(xx.jpg) 10px 20px no-repeat;图片延伸方式：repeat重复/round平铺/stretch拉伸 border-image{border:mpx;border-image:url（）m repeat;


文本溢出
text-overflow word-wrap
text-overflow:clip(剪切)|ellipsis（省略标记）但只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，须定义强制文本在一行内显示及溢出内容为隐藏。text-overflow:ellipsis,overflow:hidden,white-space:nowrap
word-wrap:normail(控制连续文本换行，默认值)|break-word（内容将在边界内换行，长单词或URL地址内部进行换行不常用）


背景：
设置元素背景图片的原始起始位置：background-origin:border-box边框|padding-box内边距（默认）|content-box（内容） 不是no-repeat则属性无效，从边框开始显示


将背景图片做适当的裁剪以适应实际需要background-clip ： border-box 边框（默认）| padding-box 内填充| content-box 内容区域| no-clip不裁切


设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。background-size: auto（默认） | <长度值>两个宽高 一个宽等比 | <百分比> | cover覆盖（填满整个容器） | contain容纳


多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。background-image:url1,url2,...,urlN;
1、用逗号隔开每组 background 的缩写值；
2、如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
3、如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
4、background-color 只能设置一个。