css3 新特性最新总结

一、选择器

CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。

element1~element2: 选择前面有element1元素的每个element2元素。
[attribute^=value]: 选择某元素attribute属性是以value开头的。
[attribute$=value]: 选择某元素attribute属性是以value结尾的。
[attribute*=value]: 选择某元素attribute属性包含value字符串的。
E:first-of-type: 选择属于其父元素的首个E元素的每个E元素。
E:last-of-type: 选择属于其父元素的最后E元素的每个E元素。
E:only-of-type: 选择属于其父元素唯一的E元素的每个E元素。
E:only-child: 选择属于其父元素的唯一子元素的每个E元素。
E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。
E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。
E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。
E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。
E:last-child: 选择属于其父元素最后一个子元素每个E元素。
:root: 选择文档的根元素。
E:empty: 选择没有子元素的每个E元素（包括文本节点)。
E:target: 选择当前活动的E元素。
E:enabled: 选择每个启用的E元素。
E:disabled: 选择每个禁用的E元素。
E:checked: 选择每个被选中的E元素。
E:not(selector): 选择非selector元素的每个元素。
E::selection: 选择被用户选取的元素部分。

二、transition

当元素从一种样式变换成另一种样式时 , 为元素添加效果(不用使用Flash动画或JS)

transition.png

三、transform

对元素在2D、3D进行旋转、缩放、位移、倾斜等操作
none: 定义不进行转换。
matrix(n,n,n,n,n,n): 定义2D转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定义3D转换，使用16个值的4x4矩阵。
translate(x,y): 定义2D位移转换。
translate3d(x,y,z): 定义3D位移转换。
translateX(x): 定义位移转换，只是用X轴的值。
translateY(y): 定义位移转换，只是用Y轴的值。
translateZ(z): 定义3D位移转换，只是用Z轴的值。
scale(x,y): 定义2D缩放转换。
scale3d(x,y,z): 定义3D缩放转换。
scaleX(x): 通过设置X轴的值来定义缩放转换。
scaleY(y): 通过设置Y轴的值来定义缩放转换。
scaleZ(z): 通过设置Z轴的值来定义3D缩放转换。
rotate(angle): 定义2D旋转，在参数中规定角度。
rotate3d(x,y,z,angle): 定义3D旋转。
rotateX(angle): 定义沿着X轴的3D旋转。
rotateY(angle): 定义沿着Y轴的3D旋转。
rotateZ(angle): 定义沿着Z轴的3D旋转。
skew(x-angle,y-angle): 定义沿着X和Y轴的2D倾斜转换。
skewX(angle): 定义沿着X轴的2D倾斜转换。
skewY(angle): 定义沿着Y轴的2D倾斜转换。
perspective(n): 为3D转换元素定义透视视图。

判断3d旋转方向.png

四、animation

让css可以制作动画

1.@keyframes(重点) 定义动画的名称和动画的内容
2.animation(重点) 以下所有动画属性的简写方式，除了 animation-play-state 属性。
3.animation-name(了解) 引用动画的名称
4.animation-duration(了解) 设置动画持续的时间，单位可以是 s(秒) ms(毫秒)
5.animation-timing-function(了解) 设置动画的运动方式，默认是‘ease‘缓冲运动，还有'linear' 匀速运动
6.animation-delay(了解) 设置动画延迟执行时间，单位可以是 s(秒) ms(毫秒)
7.animation-iteration-count(了解) 设置动画播放的次数，默认是 1，设置无数次用"infinite"
8.animation-direction(了解) 设置动画是否在下一周期逆向返回，默认是 "normal"，不返回，还可以设置"alternate",返回
9.animation-play-state(了解) 设置动画是否正在运行或暂停。默认是 "running",播放，暂停用"paused"

下面这段代码的效果

        body{
            background-color: #333;
        }
        .con{
            width:380px;
            height:270px;
            margin:150px auto 0;
        }
        .con div{
            height:200px;
            width:24px;
            margin:15px;
            float: left;
            background:#ddd;
            border-radius:12px;
        }
        .con p{            
            text-align: center;
            font-size:18px;
            color:#fff;
        }
        .con .box:nth-child(1){
            background-color: #20c070;
            animation: jumping 500ms ease 0ms infinite alternate;
        }
        .con .box:nth-child(2){
            background-color: #3090d0;
            animation: jumping 500ms ease 100ms infinite alternate;
        }
        .con .box:nth-child(3){
            background-color: #9050b0;
            animation: jumping 500ms ease 200ms infinite alternate;
        }
        .con .box:nth-child(4){
            background-color: #e07020;
            animation: jumping 500ms ease 300ms infinite alternate;
        }
        .con .box:nth-child(5){
            background-color: #c03020;
            animation: jumping 500ms ease 400ms infinite alternate;
        }
        .con .box:nth-child(6){
            background-color: #e04030;
            animation: jumping 500ms ease 500ms infinite alternate;
        }
        .con .box:nth-child(7){
            background-color: #e04080;
            animation: jumping 500ms ease 600ms infinite alternate;
        }
        @keyframes jumping{
            from{
                transform:scale(1,0.3);
            }
            to{
                transform:scale(1,1); 
            }
        }
    </style>``
<body>
    <div class="con">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <p>LOADING...</p>
    </div>
</body>

loading.gif

五、边框

border-radius可以创建圆角边框
box-shadow可以为元素添加阴影
border-image可以使用图片来绘制边框

六、背景

1.background-clip 属性用于确定背景画区 (通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围)
background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box;背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box
2.background-origin 属性用于确定背景的位置，它通常与background-position一起用 3. background-size 属性常用来调整背景图片的大小，主要用于设定图片本身
4.background-break

七、文字效果

word-wrap属性允许您允许文本强制文本进行换行，即这意味着会对单词进行拆分
text-overflow设置或检索当当前行超过指定容器的边界时如何显示
text-shadow可向文本应用阴影
text-decoration对文字的更深层次的渲染，具体有三个属性可供设置：
text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度

八、渐变

教程

linear-gradient(线性渐变)
radial-gradient(径向渐变)

线性渐变.png

九、@font-face特性

通过css3 , 可以自由使用任意字体

十、多列布局

column-count: 规定元素应该被分隔的列数。
column-gap: 规定列之间的间隔。
column-rule: 设置列之间的宽度、样式和颜色规则

十一、界面

resize属性规定是否可由用户调整元素尺寸
box-sizing 有content-box、border-box和inherit三个值 (这里涉及标准盒模型和怪异盒模型)
outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

欢迎补充!!!~~~

css3 新特性 最新总结