CSS3新特性精讲-优快云博客

CSS3 是最新的 CSS 标准。

1. 选择器

(1) 属性选择器(配合正则的选择器)

属性选择器	描述
E[key^=“bar”]	选择匹配E的元素，且该元素定义了key属性，key属性值以“bar”开始。E选择符可以省略，表示可匹配任意类型的元素。
E[key$=“bar”]	key以“bar”结尾
E[key*=“bar”]	key包含“bar”。

(2) 结构伪类选择器

选择器	描述
E:first-child	位于其父元素中第一个位置，且匹配E的子元素。
E:last-child	位于其父元素中最后一个位置，且匹配E的子元素。
E:nth-child(n)	所有在其父元素中第n个位置的匹配E的子元素。
E:nth-child(-n+a)	父元素中前a(包含a)个匹配E的子元素（特殊-n+a=0停止）。
E:nth-child(even)	所有在其父元素中位置为偶数的子元素。
E:nth-child(odd)	所有在其父元素中位置为奇数的子元素

特别注意: 子元素索引和参数n均从1开始,

上面的选择器基本满足需求，下面两种仅做了解即可。

E:first-of-type ：位于其父元素中且匹配E的第一个同类型的子元素。
E:last-of-type ：位于其父元素中且匹配E的最后第一个同类型的子元素

2. 盒模型

box-sizing:content-box；元素的宽高只包含content
box-sizing:pandding-box；元素宽高包含padding和content
box-sizing:border-box；元素的宽高包含border、padding和content （常用）

附：box-shadow 添加盒子阴影

3. 背景和边框

新增背景属性：
（1）background-origin 规定背景图片的定位区域。如：background-origin:content-box;
（2） background-size 规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。如：background-size:63px 100px;（宽，高）

新增边框属性：
（1）border-radius 用于创建圆角 (原理是利用圆与角的两边同时相切)
（2）border-image 给边框添加背景图片

4. 文本和颜色

新增文本属性：
text-overflow 规定当文本溢出包含元素时发生的事情。
text-wrap 规定文本的换行规则。
text-shadow 向文本添加阴影。
word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

新增颜色属性：
rgba r:红色值，g: 绿色值，b: 蓝色值，a：透明度
用法： color: rgba(255,00,00,1); background: rgba(00,00,00,.5);

hsla h:色相，s：饱和度，l：亮度，a：透明度
用法： color: hsla( 112, 72%, 33%, 0.68); background-color: hsla( 49, 65%, 60%, 0.68);

5. 过渡效果

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：
（1）规定您希望把效果添加到哪个 CSS 属性上
（2）规定效果的时长

例：transition: width 2s;

transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
（通常与hover搭配使用，谁做过渡给谁加hover事件）

5. 2D和3D转换

作用：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
优点：不会影响到其他元素的位置

transform 向元素应用 2D 或 3D 转换。例：transform：translate(50px,100px);
transform-origin 允许你改变被转换元素的位置，即设置转换中心点。

2D:
translate() 移动：translate(50px,100px) 表示把元素从左侧移动 50 像素，从顶端移动 100 像素。
rotate() 旋转：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
scale() 缩放：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

3D：
rotateX() 元素围绕其 X 轴以给定的度数进行旋转。
rotateY() 元素围绕其 Y轴以给定的度数进行旋转。
perspective 规定 3D 元素的透视效果（一般加在被观察元素的父盒子上面）。
（附：图片旋转木马效果，运行的话照片请自行更换本地图片，代码见文章底部）
6. 动画

作用：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

主要属性：
@keyframes ：在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

例：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@keyframes 中创建动画后，要把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动画的名称、规定动画的时长
例：animation: myfirst 5s;
表示把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：

7. 多列布局

主要作用：能够创建多个列来对文本进行布局 - 就像报纸那样！
column-count 属性规定元素应该被分隔的列数
column-gap 属性规定列之间的间隔
column-rule 属性设置列之间的宽度、样式和颜色规则

8.用户界面

resize：属性规定是否可由用户调整元素尺寸。
box-sizing ：属性允许您以确切的方式定义适应某个区域的具体内容。

9. 媒体查询

监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式，主要应用于响应式的网站的适配方案。

10. 弹性布局 flex

弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。（非常好用和重要，比如用来做盒子的垂直居中以及圣杯布局都很方便；细节较多，请自行学习）

11. 栅格布局 grid

如果将flex布局比喻为一维上的布局，那grid就实现了二维布局，更加灵活。

12. Filter（滤镜）：

黑白色 filter: grayscale(100%)、（网页全灰的实现属性）
褐色 filter:sepia(1)、
饱和度 saturate(2)、
色相旋转 hue-rotate(90deg)、
反色 invert(1)、
透明度 opacity(.5)、
亮度 brightness(.5)、
对比度 contrast(2)、
模糊 blur(3px)
（仅做了解）

彩蛋：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转木马</title>
    <script>
        var arr = [5, 4, 3, 2, 6];
        function BubbleSort(array) {
            for (let i = 0; i < array.length - 1; i++) {
                for (let j = 0; j < array.length - i - 1; j++) {
                    if (array[j] > array[j + 1]) {
                        [array[j], array[j + 1]] = [array[j + 1], array[j]]
                    }
                }
            }
            return array
        }
        BubbleSort(arr);
        console.log(arr);
    </script>
    <style>
        body {
            perspective: 1000px;
        }
        
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 500px auto;
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 20s linear infinite;
            background: url(王者荣耀.jpg) no-repeat;
        }
        
        section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(王者荣耀.jpg) no-repeat;
        }
        
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }
        
        section div:nth-child(2) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-child(3) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-child(4) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-child(5) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-child(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>

//圣杯布局
<div class="demo">
    <div class="header"></div>
    <div class="body">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>

<style>
    .demo {
        display: flex;
        flex-direction: column;
    }
    
    .demo div {
        flex: 1;
    }
    
    .body {
        display: flex;
    }
    
    .header,
    .footer,
    .left,
    .right {
        flex: 0 0 20%!important;
    }
</style>