记录工作中常用的CSS3

border-radius:6px; 
// border-radius:50%; //圆形
box-shadow: 1px 1px 1px #666; //box-shadow: h-shadow v-shadow blur spread color inset(outset);  

background-size: 100% 100%;  //对背景图片进行拉伸，使其完成填充内容区域
// background-size:50px 100px;  //对背景图片进行拉伸，使其完成填充内容区域

text-shadow: 5px 5px 5px #FF0000;  //规定文字水平阴影、垂直阴影、模糊距离，以及阴影的颜色
word-wrap:break-word; //允许长单词换行到下一行
text-overflow:ellipsis; //显示省略符号来代表被修剪的文本 配合white-space:nowrap; overflow:hidden;使用

transform: translate(50px,100px);  //从其当前位置移动 left top
transform: rotate(30deg);  //顺时针旋转给定的角度(允许负值--逆时针旋转)。
transform: scale(2,4); //尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
transform: skew(30deg,20deg); //翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
transform:matrix(0.866,0.5,-0.5,0.866,0,0); //把所有 2D 转换方法组合在一起
transform: rotateX(120deg);  //围绕其 X 轴以给定的度数进行旋转
transform: rotateY(130deg);  //围绕其 Y 轴以给定的度数进行旋转
-ms-transform: ;		/* IE 9 */
-webkit-transform: ;	/* Safari and Chrome */
-o-transform: ;		/* Opera */
-moz-transform: ;		/* Firefox */

div{
	width:100px;
	height:100px;
	background:yellow;
	transition:width 2s linear 2s, height 2s linear 2s,transform 2s linear 2s;     //一般配合hover使用
	-moz-transition:width 2s linear 2s, height 2s linear 2s, -moz-transform 2s linear 2s; /* Firefox 4 */
	-webkit-transition:width 2s linear 2s, height 2s linear 2s, -webkit-transform 2s linear 2s; /* Safari and Chrome */
	-o-transition:width 2s linear 2s, height 2s linear 2s, -o-transform 2s linear 2s; /* Opera */
}

div:hover{
	width:200px;
	height:200px;
	transform:rotate(180deg);
	-moz-transform:rotate(180deg); /* Firefox 4 */
	-webkit-transform:rotate(180deg); /* Safari and Chrome */
	-o-transform:rotate(180deg); /* Opera */
}

.custom-cursor {
    width: 2px;
    height: 45px;
    background-color: #2F323A;
    position: absolute;
    top: 32px;
    right: 20px;
    animation: cursor 1s linear infinite;
    -webkit-animation: cursor 1s linear infinite;
    -moz-animation: cursor 1s linear infinite;
    -o-animation: cursor 1s linear infinite;
}
@keyframes cursor {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    50.1% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}
@-webkit-keyframes cursor {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    50.1% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}
@-moz-keyframes cursor {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    50.1% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}
@-o-keyframes cursor {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    50.1% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}

box-sizing:border-box;   
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float: left;