css3新特性

CSS3新特性样式

背景

background-origin

我们知道盒子的大小有三部分组成：border, padding, content，当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的，它有三个可选值：

border-box
padding-box
content-box

其中意思不必解释就可以明白。如果不进行设置的话，默认是padding-box，即以padding的左上角为原点。

background-clip

该属性是用来设置背景(背景图片、背景颜色)延伸的范围，有4个值可选

border-box：背景延伸至边框外沿(但是在边框下层)
padding-box：背景延伸至内边距(padding)外沿,不会绘制到边框处
content-box：背景被裁剪至内容区(content box)外沿
text：背景被裁剪成文字的前景色

background-size

background-size用以设置背景图片大小。单张图片的背景大小可以使用以下三种方法中的一种来规定：

使用关键词 contain
使用关键词 cover
设定宽度和高度值

设定指定的宽度和高度值想必不用多加介绍。contain和cover会等比例的缩放图片，以使得图片能够最大的被完整包含或者最小的覆盖背景区。

边框

边框圆角

使用border-radius可以设置边框为圆角的，border-radius的值就是圆角边框的半径。

取值个数	设置
1个，如border-radius: 20px	设置四个角的圆角半径都为20px
2个，如border-radius: 10px 20px	设置左上角和右下角这条对角线为10px,另一条对角线为20px
3个，如border-radius: 10px 20px 30px	设置左上角为10px,右上角和左下角这条对角线为20px,右下角为30px
4个，如border-radius: 5px 10px 15px 20px	从左上角开始设置，按顺时针来，即左上角为5px,右上角为10px, …

我们发现半径也分为水平半径和垂直半径，这两个也可以分别设置，用/分开当做两组，第一个用来设置水平半径，第二个设置垂直半径，如

width: 100px;
height: 120px;
margin: 0 auto;
border-radius: 50px / 60px; 
background-color: pink;

如果不分开设置，则默认水平半径和垂直半径是相同的。

CSS3选择器

CSS3新增了许多的选择器，为我们选择元素提供了更加灵活的选择。

属性选择器

[attr]：选择包含attr属性的标签
[attr=value]：选择attr属性值为value的标签
[attr^=value]：选择attr属性值以value开头的标签
[attr*=value]：选择attr属性值包含value的标签
[attr$=value]：选择attr属性值以value的标签

div[class] {
    /* 会选择包含class属性的div标签 */
}
div[class="active"] {
    /* 会选择class属性值为active的div标签 */
}
div[class^="header"] {
    /* 会选择class属性以header开头的div标签 */
}

... ...

结构伪类选择器

E:first-child
E:last-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)

CSS3 2D变换

CSS3 2D变换包括对元素进行移动、缩放、转动、拉长或拉伸。

translate()：对元素进行进行移动
- translate(100px)：对元素向x正方向移动100px(负值向负方向移动)
- translate(100px, 100px)：对元素向x, y正方向方向移动100px
scale()：对元素进行缩放
- scale(n)：对元素进行缩放，传入的参数大于1，进行放大，小于1，进行缩小
- scale(x, y)：第一个参数对宽度进行缩放，第二个值对高度进行缩放
rotate()：围绕中心旋转，正值顺时针，负值逆时针
- transform-origin：可以改变旋转的中心，如：

  /* 围绕左上角进行旋转 */
transform-origin: left top;

/* 围绕中心旋转 为默认值 */
transform-origin: 50% 50%;

CSS3 3D

3D变换的操作同2D相同，只是多了一个对Z轴的操作，如translateZ()，而rotate也分为rotateX(), rotateY(), rotateZ()，分别表示绕着X轴，Y轴，Z轴旋转。2D变换的rotate()其实就相当于rotateZ()。

CSS3动画

transition

.box {
    height: 100px;
    width: 100px;
    background-color: black;
}
.box:hover {
    transform: translateX(600px);
}

当我们把鼠标放在盒子上时，盒子向右移动了600px，但是这个过程是在瞬间完成的，十分的突兀，我们希望是缓慢由一个转态转变到另一个状态的，这种效果又叫做过渡，这时就需要用到transition属性了。

animation

与transition一样，animation也有很多的属性

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为
infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

过渡是指在两个状态之间，而动画则是指在多个状态之间变化，这些状态我们称之为关键帧，因此动画又称之为关键帧动画。使用动画首先要创建关键帧，然后使用animation-name去调用该动画，如:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>

     <style>
         .box {
             width: 100px;
             height: 100px;
             background-color: aqua;
         }

         .box:hover {
            animation-name: move;
            animation-duration: 1s;
         }

        /* 创建一个关键帧动画 动画名为move */
        /* 调用时使用animation-name: move调用 */
         @keyframes move {
             /* 第一个状态 0% 时的状态 可以使用from代替 */
             /* 这里的百分比是指 总时间 * 百分比 得到的某个时刻的状态*/
             0% {
                 transform: translateX(0px);
             }

             50% {
                 transform: translateX(100px);
             }

             /* 100% 可以使用 to 代替 */
             100% {
                 transform: translateY(100px);
             }
         }
     </style>

 </head>
 <body>
    <div class="box">

    </div>
 </body>
 </html>

CSS3 flex布局

当一个父元素被设置为display:flex时，它就是弹性布局，子元素的float、clear和vertical-align属性将失效。此时我们把父元素称之为container(容器)，把子元素称之为item(项目)。当父元素被设置为弹性布局后，对子元素有什么影响? 先来感受一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            display: flex;
            width: 500px;
            height: 400px;
            background-color: crimson;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
        }

        /* 这个是为了演示方便 样式不重要 不必细看 */
        .item div{
           width: 50%;
           height: 50%;
           position: absolute;
           /* 下面三行语句是为了设置居中对齐 */
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           background-color: brown;
           /* 圆角边框 */
           border-radius: 50%;
           /* 下面两行设置文字居中对齐 */
           text-align: center;
           line-height: 50px;
           /* 设置字体样式 */
           font-size: 30px;
           font-weight: 700;
           color: white;
        }
    </style>

</head>
<body>
   <div class="container">
        <div class="item"><div>1</div></div>
        <div class="item"><div>2</div></div>
        <div class="item"><div>3</div></div>
   </div>
</body>
</html>

container上的属性

直观的感受了一下flex的效果，现在我们来看看flex要设置哪些属性，首先设置在container的flex属性有

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

下面来一一介绍。
flex-direction是用来设置主轴的，它有以下四个值可选

row：默认值，主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

现在我们分别修改container里面的样式

flex-direction: row-reverse;

item上的属性

下面6个属性是设置在item上的

order
flex-grow
flex-shrink
flex-basis
flex
self-align

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，现在设置第2个item的order为1

.item:nth-child(2){
    order: 1;
}