CSS3新特性概览

CSS3常用新特性:包含样式、选择器、颜色渐变、2D/3D转换、动画、布局等。

一、CSS3新特性之样式篇

1. 背景

  ●  background-origin
   作用:规定背景图片的定位区域。
   备注:默认盒子的背景图片是在盒子的内边距左上角对齐设置。

background-origin: padding-box;  /* 背景图像相对内边距定位(默认值) */
background-origin: border-box;  /* 背景图像相对边框定位【以边框左上角为参照进行位置设置】 */
background-origin: content-box;  /* 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】 */

  ●  background-clip
   作用:规定背景的绘制区域。

background-clip: border-box;  /* 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】 */
background-clip: padding-box;  /* 背景被裁切到内边距区域【将背景图片在内边距区域(包含内容区域)显示】 */
background-clip: content-box;  /* 背景被裁切到内容区域【将背景图片在内容区域显示】 */

  ●  background-size
   作用:规定背景图片的尺寸。

background-size: cover;  /* 将背景图片按照原来的缩放比,铺满整个容器 */
background-size: contain;  /* 将背景图片按照原来的缩放比,完整的显示到容器中,不确定是否会将容器填充满 */

2. 边框  

  ●  box-shadow
   作用:盒子阴影。

box-shadow: 0px 0px 10px red,
            5px -5px 10px blue;
/*
    第一个0px,代表阴影在水平方向的偏移量(正数向右,负数向左)
    第二个0px,代表阴影在垂直方向的偏移量(正数向下,负数向上)
    第三个10px,代表阴影的模糊度(不能设置负数)
    设置多个阴影,使用逗号隔开
*/

  ●  border-radius
   作用:边框圆角。

border: 1px solid red;
border-radius: 10px;

  ●  border-image
   作用:边框图片。

/* 设置边框图片 */
border-image-source: url("2.png");

/* 边框图片裁切 : 不需要带单位*/
border-image-slice: 20;

/* 设置边框图片的平铺方式(stretch是默认的拉伸,round和repeat都是平铺,在图片不能显示完整处有略微差别,一般推荐round) */
/* border-image-repeat: stretch; */
border-image-repeat: round;
/* border-image-repeat: repeat; */

border-image-width: 20px;

3. 文本

  ●  text-shadow
   作用:设置文本阴影。

/* 同盒子阴影 */
text-shadow: 0px 0px 10px red;

二、CSS3新特性之选择器篇

1. 属性选择器

  ● [属性名=值] {}
  ● [属性名] {}    匹配对应的属性即可
  ● [属性名^=值] {}  以值开头
  ● [属性名*=值] {}  包含
  ● [属性名$=值] {}  以值结束

p[class$="o"] {
    color: red;
}

2. 结构伪类选择器

  ● :first-child {}     选中父元素中第一个子元素
  ● :last-child {}     选中父元素中最后一个子元素
  ● :nth-child(n) {}    选中父元素中正数第n个子元素
  ● :nth-last-child(n) {}  选中父元素中倒数第n个子元素

/* 选中li标签且该标签必须是父元素中第一个子元素 */
li:first-child {
    color:red;
}
/* 选中li标签且该标签必须是父元素中倒数第三个子元素 */
li:nth-last-child(3) {
    color:red;
}

  备注:
  ● n 的取值大于等于0
  ● n 可以设置预定义的值
    ৹ odd:选中奇数位置的元素
    ৹ even:选中偶数位置的元素
  ● 可以是一个表达式:an+b的格式

3. 其他选择器

  ● :target      被锚链接指向的时候会触发该选择器
  ● ::selection    当被鼠标选中的时候的样式
  ● ::first-line    选中第一行
  ● ::first-letter   选中第一个字符

/* 当锚链接指向的时候会触发该选择器 */
p:target {
    color: red;
}
/* 当使用鼠标选中(框选)时候的样式 */
p::selection {
    color: red;
    background-color: green;
}

三、CSS3新特性之颜色渐变

1. 线性渐变

  需要有三要素:
  ① 开始颜色和结束颜色
  ② 渐变的方向
  ③ 渐变的范围

/* 实现线性渐变 */
background-image: linear-gradient(
    to right,
    red,
    blue
);

/* 加百分比实现线性渐变:红色从20%起开始向蓝色渐变 */
background-image: linear-gradient(
    to right,
    red 50%,
    blue
);

  备注:
  表示方向:
  ① to + right | top | bottom | left
  ② 通过角度表示一个方向(角度增加,沿顺时针方向渐变):
    0deg 【从下向上渐变】
    90deg【从左向右】

2. 径向渐变

  需要确定圆心位置和半径

/* 径向渐变 */
background-image: radial-gradient(
    100px at center,
    red,
    blue
);

四、2D转换

1. 位移

  transform: translate(x,y);
  备注:位移是相对元素自身的位置发生位置改变

2. 旋转

  transform: rotate(60deg);
  备注:取值为角度,正数代表顺时针旋转,负数代表逆时针旋转。

3. 缩放

  transform: scale(0.5,1);
  备注:
  ① 取值为倍数关系,缩小大于0小于1,放大设置大于1
  ② 取值写一个数时,对宽和高做相同比例缩放;取值为两个数时,前者宽、后者高

4. 倾斜

  transform: skew(30deg,30deg);
  备注:
  ① 第一个值代表沿着x轴方向倾斜
  ② 第二个值代表沿着y轴方向倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        .box {
            height: 100px;
            background-color: pink;
        }

        .one {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }

        .box:hover .one {
            /* 2d转换位移:改变元素位置 */
            /* transform: translate(100px, 100px); */

            /* 2d转换旋转:设置的是角度 */
            /* transform: rotate(60deg); */

            /* 2d转换缩放:设置的是倍数 */
            /* transform: scale(0.5, 1); */

            /* 2d转换倾斜:设置的是角度 */
            transform: skew(30deg, 30deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="one">asdfafd</div>
</div>
</body>
</html>

五、3D转换

1. 位移

  transform: translateX() translateY() translateZ();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .one {
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;

            /* 透视: 在网页中实现近大远小; */
            perspective: 1000px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 200px;
        }

        .one:hover .box {
            transform: translateZ(200px);
        }
    </style>
</head>
<body>
<div class="one">
    <div class="box"></div>
</div>
</body>
</html>

2. 旋转

  transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);

3. 缩放

  transform: scaleX(0.5) scaleY(1) scaleZ(1);

4. 倾斜

  transform: skewX(30deg) skewY();

5. 小案例

  transform-style: preserve-3d;
  将平面图形转换为立体图形
  3D转换实现魔方

六、CSS3新特性之动画篇

1. 过渡

  过渡又称补间动画,当一个元素从一个状态到另一个状态切换时,中间有个空白,过渡能为这个空白添加一个效果。。
  过渡主要有几个属性:
  ● transition-property: all;       设置哪些属性要参与到过渡动画效果中:all
  ● transition-duration: 1s;        设置过渡执行时间
  ● transition-delay: 1s;         设置过渡延时执行时间
  ● transition-timing-function: linear;  设置过渡的速度类型

  关于过渡的速度类型,可以点击查看CSS3中的transition属性详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        /* 动画的开始状态 : 浏览中元素的默认显示效果*/
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;

            /* 设置哪些属性要参与到过渡动画效果中: all */
            /* transition-property: all; */

            /* 设置过渡执行时间 */
            /* transition-duration: 1s; */

            /* 设置过渡延时执行时间 */
            /* transition-delay: 1s; */

            /* 设置过渡的速度类型 */
            /* transition-timing-function: linear; */

            /* 简写:作用元素,执行时间,速度类型,延时 */
            transition: all 1s linear 1s;
        }

        /* 动画的结束状态 */
        .box1:hover {
            width: 400px;
            height: 400px;
            background-color: green;
        }
    </style>
</head>
<body>

<div class="box1"></div>
</body>
</html>

2. 动画

  编写CSS3动画有两步:先定义动画集,然后调用。
  ① 定义动画集,设置名称和动作

@keyframes  rotate {
    /* 定义开始状态  from也可以用0%表示 */
    from {
        transform: rotateZ(0deg);
    }

    /* 中间可以写一些50%等中间状态 */

    /* 结束状态 to也可以用100%表示 */
    to {
       transform: rotateZ(360deg);
    }
}

  ② 调用
  通过css选择器选择元素,然后设置动画名称,动画时间,动画执行的次数,动画执行速度类型(同过渡效果)

/* 调用 */
/* 动画名称 */
animation-name: rotate;
/* 设置动画时间 */
animation-duration: 2s;
/* 设置动画执行的次数:infinite无限循环 */
animation-iteration-ount: infinite;
/* 动画执行速度类型:linear匀速 */
animation-timing-function: linear;

  注意:如果设置动画集使用的是百分比,那么记住百分比是相对整个动画执行时间的。

  在调用的时候也有一些其它的属性可以设置,如下一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 0px;
            height: 0px;
            border-left: 100px solid yellow;
            border-right: 100px solid red;
            border-bottom: 100px solid green;
            border-top: 100px solid pink;
            border-radius: 50%;

            /* 调用 */
            /* 动画名称 */
            animation-name: rotate;

            /* 设置动画时间 */
            animation-duration: 2s;

            /* 设置动画执行的次数:  infinite 无限执行; */
            animation-iteration-count: infinite;

            /* 动画执行的速度类型 */
            animation-timing-function: linear;

            /* 设置动画逆波,设置该属性后动画在返回时不会“瞬移” */
            animation-direction: alternate;

            /* 设置动画延时 */
            animation-delay: 1s;

            /* 设置动画结束时候的状态,该属性生效的前提是动画执行次数不能为 infinite无限执行 */
            animation-fill-mode: forwards;
        }

        .box:hover {
            /* 动画暂停 */
            animation-play-state: paused;
        }

        /* 1定义动画集 */
        @keyframes rotate {

            /* 定义开始状态  0%*/
            0% {
                /* transform: rotateZ(0deg); */
                transform: translateX(0px);
            }

            50% {

            }

            /* 结束状态 100%*/
            100% {
                /* transform: rotateZ(360deg); */ /* 旋转动画 */
                transform: translateX(200px); /* 位移动画 */
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

七、CSS3新特性之网页布局篇

  这里主要是伸缩布局(或弹性布局),它和响应局布局差不多。
  CSS无非是设置样式、进行网页布局。前面介绍的都是样式,这里开始介绍的就是布局。

1. 设置伸缩布局

  设置伸缩布局的步骤如下:
  ① 设置父元素为伸缩盒子【直接父元素】

    display: flex

  为什么在伸缩盒子中,子元素会在一行上显示?
    ● 子元素是按照伸缩盒子中主轴方向显示
    ● 只有伸缩盒子才有主轴和侧轴
    ● 主轴:默认水平从左向右显示
    ● 侧轴:始终要垂直于主轴

  ② 设置伸缩盒子主轴方向(flex-direction)

    flex-direction: row;  /* 默认值 */
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;

  ③ 设置元素在主轴的对齐方式( justify-content)

    /* 设置子元素在主轴方向的对齐方式 */
    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;

  ④ 设置元素在侧轴的对齐方式 (align-items)

    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    /* 默认值 */
    align-items: stretch;

  ⑤ 设置元素是否换行显示(flex-wrap)
  在伸缩盒子中所有的元素默认都会在一行上显示
  如果希望换行:

    flex-wrap: wrap | nowrap;

  ⑥ 设置元素换行后的对齐方式(align-content)

    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-around;
    align-content: space-between;
    /* 换行后的默认值 */
    align-content: stretch;

2. 设置缩放比

  需求:让父元素下的三个子元素在一行内实现三等分布局。
  方法:父元素设置display: flex;属性,给每个子元素设置flex: 1属性。
  原理:给每个子元素设置flex: 1属性后,等于把父元素分成了3份,每个子元素占1份。如果给其中一个子元素设置成flex: 2,那么等同于把父元素分成了4份,这个子元素占2份,另外两个子元素各占1份。
  这个方式类似于 bootstrap 的栅格布局
  通过flex实现类栅格布局的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 577px;
            height: 100px;
            background-color: pink;
            display: flex;
        }

        .box > div {
            background-color: yellowgreen;
        }

        div.one {
            flex: 1;
            background-color: red;
        }

        div.two {
            flex: 2;
            background-color: blue;
        }

        div.three {
            flex: 1;
        }

    </style>
</head>
<body>

<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
</body>
</html>

八、总结

  以上介绍的就是CSS3最常用的功能,难度不大,只是要记住的属性比较多。不需要考虑兼容问题的话可以多用,一般移动端用的比较多。


  转载请注明: 文渊博客 CSS3新特性概览

  目录