CSS3新特性一览

版权声明：随便转载，随便转载，随便转载 https://blog.csdn.net/u013685940/article/details/20634799

css3新特性：
边框
1、border-radius:20px）
2、box-shadow:10px 10px 10px 10px （可设置负债）
3、border-image:url{} 30 30 roung round
   
   border-image按w3c的理解有点难，看这篇博客 点击打开链接


背景
4、background-size:20px 20px|20% 20%
5、background-origin:border-box|padding-box|content-box(定位背景图片的位置)
6、background：URL（）设置背景
   background-image：URL（），URL（）设置多重背景
7、background-clip: border-box|padding-box|content-box（规定背景*的绘制区域）


文本
8、text-shadow：5px 5px 5px #abcdef(平阴影、垂直阴影、模糊距离，以及阴影的颜色)
9、word-wrap:break-word(单词超出某个区域强制换行，主流浏览器暂时不支持)


字体
10、@font-face{font-family：字体；src:yrl('');font-weight}(可使用服务器字体)




2d转换
11、rotate()__________二维旋转
 div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
12、translate（）_________位移
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
13、scale（）___________伸缩
div
{
transform: scale(2,4);宽变为两倍
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
14、skew()__________三维旋转
div
{
transform: skew(30deg,20deg);x坐标转30度，y坐标转20度
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}


CSS3过渡
15、transition: width 1s linear 2s（元素，过渡时间，过渡曲线，何时开始）


CSS3动画
16、animation: myfirst 5s linear 2s infinite alternate
    @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;}

}

这里有一个CSS3动画实例(不是我写的，网上下的，作者找不到):

.loading1 {
    background-color: #000;
    width: 90px;
    height: 90px;
    border: 30px solid #FFF;
    border-right-width: 0;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px #009933;

    /* css3 animation */
    -webkit-animation: anim1 1s linear infinite;
    -moz-animation: anim1 1s linear infinite;
    -ms-animation: anim1 1s linear infinite;
    -o-animation: anim1 1s linear infinite;
    animation: anim1 1s linear infinite;
}

/* css3 keyframes - animation 1 */
@-webkit-keyframes anim1 {
    from { -webkit-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -webkit-transform: rotateX(0deg) rotateZ(180deg); }
    to { -webkit-transform: rotateX(45deg) rotateZ(360deg); }
}
@-moz-keyframes anim1 {
    from { -moz-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -moz-transform: rotateX(0deg) rotateZ(180deg); }
    to { -moz-transform: rotateX(45deg) rotateZ(360deg); }
}
@-ms-keyframes anim1 {
    from { -ms-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -ms-transform: rotateX(0deg) rotateZ(180deg); }
    to { -ms-transform: rotateX(45deg) rotateZ(360deg); }
}
@-o-keyframes anim1 {
    from { -o-transform: rotateX(45deg) rotateZ(0deg); }
    50% { -o-transform: rotateX(0deg) rotateZ(180deg); }
    to { -o-transform: rotateX(45deg) rotateZ(360deg); }
}
@keyframes anim1 {
    from { transform: rotateX(45deg) rotateZ(0deg); }
    50% { transform: rotateX(0deg) rotateZ(180deg); }
    to { transform: rotateX(45deg) rotateZ(360deg); }
}

多列
17、column-count(列数)  column-gap（列间隔）  column-rule(规定列之间样式)