CSS3

-sm- 代表IE内核识别码
-moz- 代表火狐内核识别码
-webkit- 代表谷歌内核识别码
-o- 代表欧鹏内核识别码
无 统一标识

样式

border-radius : border-radius: 1-4 length|% / 1-4 length|%;

box-shadow: h v blur spread color inset;    h水平，v垂直，blur模糊距离，spread阴影尺寸，color阴影颜色，inset内部或外部;

border-image:  source slice width outset repeat|initial|inherit;

box-sizing: content-box|border-box|inherit;

text-shadow: h-shadow v-shadow blur color;
        h-shadow 水平阴影的位置。允许负值
        v-shadow 垂直阴影的位置。允许负值
        blur 模糊的距离
        color 阴影的颜色
text-overflow: clip|ellipsis|string;
        clip    修剪文本
        ellipsis    显示省略符号来代表被修剪的文本
        string  使用给定的字符串来代表被修剪的文本

word-wrap: normal|break-word;
        normal  只在允许的断字点换行（浏览器保持默认处理）
        break-word  在长单词或 URL 地址内部进行换行

word-break: normal|break-all|keep-all;
        normal  使用浏览器默认的换行规则
        break-all   允许在单词内换行
        keep-all    只能在半角空格或连字符处换行

background-size: length|percentage|cover|contain;

background-image: url(),url(),url(); (可以为更多)

background-origin: padding-box|border-box|content-box;
        padding-box 背景图像填充框的相对位置
        border-box  背景图像边界框的相对位置
        content-box 背景图像的相对位置的内容框

background-clip: border-box|padding-box|content-box;
        border-box  默认值。背景绘制在边框方框内（剪切成边框方框）
        padding-box 背景绘制在衬距方框内（剪切成衬距方框）
        content-box 背景绘制在内容方框内（剪切成内容方框）

background-attachment: scroll|fixed|local|initial|inherit;
        scroll 背景图片随着页面的滚动而滚动，这是默认的
        fixed 背景图片不会随着页面的滚动而滚动
        local 背景图片会随着元素内容的滚动而滚动
        initial 设置该属性的默认值
        inherit 指定 background-attachment 的设置应该从父元素继承

自定义字体

// 定义
@font-face{
    font-family:"myFirstFont";
    src:url("sansation_light.woff");
}
// 使用
div{
    font-family:myFirstFont
}

2D转换

transform  //适用于2D、3D转换元素
transform-origin  //设置元素旋转基点位置

translate()    //X轴与Y轴定位    transfrom: translate(50px 50px);
rotata()    //元素旋转    transform:rotate(30deg);
scale()    //增加或者减小元素     transform:scale(2,4);
skew()    //X轴与Y轴定一个角度     transform:scale(30deg,40deg);
matrix()    //和2D变换和成一个，共有6个值：旋转，缩放，平移，倾斜，transform:matrix(0.866,0.5,-0.5,0.866,0,0)

3D转换

transform  //适用于2D、3D转换元素
transform  //向元素应用 2D 或 3D 转换
transform-origin  //允许你改变被转换元素的位置
transform-style  //规定被嵌套元素如何在 3D 空间中显示
perspective  //规定 3D 元素的透视效果
perspective-origin  //规定 3D 元素的底部位置
backface-visibility  //定义元素在不面对屏幕时是否可见


translate3d(x,y,z)
rotate3d(x,y,z)
scale3d(x,y,z)
matrix3d(n,n,n,n,n,n,n,n,n,.........)
perspective() 3D透视视图

过度

transtion: width 1s linear 2s;

transition  //简写属性，用于在一个属性中设置四个过渡属性
transition-property  //规定应用过渡的 CSS 属性的名称
transition-duration  //定义过渡效果花费的时间。默认是 0
transition-timing-function  //规定过渡效果的时间曲线。默认是 "ease"
transition-delay  //规定过渡效果何时开始。默认是 0

多项过度
transtion: width 1s linear 2s, height 1s, transform 2s;

动画

@keyframes 规则是创建动画
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成

@keyframes  //规定动画
@keyframes myfirst{
    from {
        background: red;
    }
    to {
        background: yellow;
    }
}

animation  //所有动画属性的简写属性，除了 animation-play-state 属性
animation-name  //规定 @keyframes 动画的名称
animation-duration  //规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function  //规定动画的速度曲线。默认是 "ease"
animation-fill-mode  //规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-delay  //规定动画何时开始。默认是 0
animation-iteration-count  //规定动画被播放的次数。默认是 1
animation-direction  //规定动画是否在下一周期逆向地播放。默认是 "normal"
animation-play-state  //规定动画是否正在运行或暂停。默认是 "running"

例子：
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    // animation: myfirst 5s linear 2s infinite alternate running;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
}

@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;
    }
}

多列

column-count  //指定元素应该被分割的列数
column-fill  //指定如何填充列
column-gap  //指定列与列之间的间隙
column-rule  //所有 column-rule-* 属性的简写
column-rule-color //指定两列间边框的颜色
column-rule-style  //指定两列间边框的样式
column-rule-width  //指定两列间边框的厚度
column-span  //指定元素要跨越多少列
column-width  //指定列的宽度
columns  //设置 column-width 和 column-count 的简写 

用户界面

resize
box-sizing
outline-offset

resize属性指定一个元素是否应该由用户去调整大小
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

图片

响应式图片：img{ max-width:100%; height:auto;}
图片文本：父级相对，子级绝对，去设置
图片滤镜：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

none  默认值，没有效果
blur(*px*)  给图像设置高斯模糊
brightness(*%*)  给图片应用一种线性乘法，使其看起来更亮或更暗
contrast(*%*)  调整图像的对比度
drop-shadow(*h-shadow v-shadow blur spread color*)  给图像设置一个阴影效果
grayscale(*%*)  将图像转换为灰度图像
hue-rotate(*deg*)  给图像应用色相旋转
invert(*%*)   反转输入图像
opacity(*%*)  转化图像的透明程度
saturate(*%*)  转换图像饱和度
sepia(*%*)  将图像转换为深褐色
url()  URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素
initial  设置属性为默认值
inherit  从父元素继承该属性