四、CSS3

一、CSS3简介

        1、CSS3概述

        CSS3 是 CSS2 的升级版本，他在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
        CSS在未来会按照模块化的方式去发展：https://www.w3.org/Style/CSS/current-work.html
        CSS3 的新特性如下：
1、新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。
2、新增了更好的视觉效果，例如：圆角、阴影、渐变等。
3、新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。
4、新增了全新的布局方案 —— 弹性盒子。
5、新增了 Web 字体，可以显示用户电脑上没有安装的字体。
6、增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。
7、增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。
8、增加动画与过渡效果，让效果的变换更具流线性、平滑性。
..............

        2、CSS3私有前缀

        2.1 什么是私有前缀

        如下代码中的 -webkit- 就是私有前缀

div {

      width : 400px ;

      height : 400px ;

      -webkit- border-radius : 20px ;

}

        2.2 为什么要有私有前缀

        W3C 标准提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。
        举个例字：

 -webkit-border-radius: 20px;

-moz- border-radius : 20px ;

-ms- border-radius : 20px ;

-o- border-radius : 20px ;

border-radius : 20px ;

         查询CSS3兼容性的网站：https://caniuse.com/

        2.3 常见浏览器私有前缀

• Chrome 浏览器： -webkit
• Safari 浏览器： -webkit
• Firefox 浏览器： -moz
• Edge 浏览器： -webkit-
• 旧 Opera 浏览器： -o-
• 旧 IE 浏览器： -ms-

        注意：

 我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具，去帮我们添加私有前缀。

二、CSS3基本语法 

        1、CSS3新增长度单位

   1）rem 根元素字体大小的倍数，只与根元素字体大小有关。

   2）vw 视口宽度的百分之多少 10vw 就是视口宽度的 10%
   3）vh 视口高度的百分之多少  10vh 就是视口高度的 10%

        视口宽度其实就是指整个浏览器页面得高度和宽度，设置上面两个单位时，当浏览器页面放大或者缩小时，对应的元素也会跟着放大或者缩小，永远占相同的比例。在移动端用的比较多。

   4） vamx 视口宽高中大的那个百分之多少。（了解即可）
   5）vmin 视口宽高中小的那个的百分之多少。（了解即可）

        2、CSS新增颜色设置方式

        CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla ，由于之前已经详细讲解，此处略过。

        3、CSS3新增选择器

        CSS3新增的选择器有：动态伪类、目标伪类、语言伪类、UI伪类、否定伪类、伪元素；这些在CSS2中已经详细讲解，此处略过。

        4、CSS3新增盒模型相关属性

        4.1 box-sizing 怪异盒模型

        使用box-sizing 属性可以设置盒模型的两种类型：

        4.2 resize 调整盒子大小

        使用 resize 属性可以控制是否允许用户调节元素尺寸。

        4.3 box-shadow 盒子阴影

        使用 box-shadow 属性为盒子添加阴影。

        语法：

        box-shadow : h-shadow v-shadow blur spread color inset ;

        各个值得含义：

        默认值：box-shadow：none 表示没有阴影
        示例：

/* 写两个值，含义：水平位置、垂直位置 */

box-shadow : 10px 10px ;

/* 写三个值，含义：水平位置、垂直位置、颜色 */

box-shadow : 10px 10px red ;

/* 写三个值，含义：水平位置、垂直位置、模糊值 */

box-shadow : 10px 10px 10px ;

/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */

box-shadow : 10px 10px 10px red ;

/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */

box-shadow : 10px 10px 10px 10px blue ;

/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */

box-shadow : 10px 10px 20px 3px blue inset ;

        应用示例：鼠标放上去时，产生阴影，类似于被选中的效果。 小米官网。

        4.4 opacity不透明度

        opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间得小数，0 是完全透明得，1 表示完全不透明。

opacity 与 rgba 的区别？

opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。

rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。

        5、CSS3新增背景属性

        5.1 background-origin

        作用：设置背景图的原点
        语法：
              1、padding-box：从padding区域开始显示背景图像。--默认值
              2、border-box：从border区域开始显示背景图像。
              3、content-box：从content区域开始显示背景图像。

        5.2 backgroud-clip

        作用：设置背景图的向外裁剪区域。
        语法：
              1、border-box：从border区域开始向外剪裁背景。--默认值
              2、padding-box：从padding区域开始向外裁剪背景。
              3、content-box：从content 区域开始向外裁剪背景。
              4、text：背景图只呈现在文字上。

        注意：若值为text，那么backgroun-clip 要加上 -webkit- 前缀。

        5.3 backgroud-size

        作用：设置背景图的尺寸。
        语法：
             1、用长度值指定背景图片大小，不允许负值。

             background-size: 300px 200px;

             2、用百分比指定背景图片大小，不允许负值。

            background-size : 100% 100% ;

            3、auto：背景图片的真实大小。--默认值
            4、contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

        background-size: contain;

           5、cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。--相对比较好的选择

        background-size: cover;

        5.4 backgorund 复合属性

        语法：

   background: color url repeat position / size origin clip

 注意：

        1. origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip 。

        2. size 的值必须写在 position 值的后面，并且用 / 分开。

        5.5 多背景图

        CSS3允许元素设置多个背景图片

        /* 添加多个背景图 */

background : url ( ../images/bg-lt.png ) no-repeat ,
                     url ( ../images/bg-rt.png ) no-repeat right top ,
                     url ( ../images/bg-lb.png ) no-repeat left bottom ,
                      url ( ../images/bg-rb.png ) no-repeat right bottom ;

        6、CSS3新增边框属性

        6.1 边框圆角

        在CSS3 中，使用border-radius 属性可以将盒子变成圆角。
        同时设置四个角的圆角：

    border-radius:10px; 

        分开设置每个角的圆角（几乎不用）：

        分开设置每个角的圆角，综合写法（几乎不用）：

   border-raidus : 左上角 x 右上角 x 右下角 x 左下角 x / 左上 y 右上 y 右下 y 左下 y

        6.2 边框外轮廓（了解）

        outline-width：外轮廓的宽度。
        outline-color：外轮廓的颜色。
        outline-style：外轮廓的风格。
                none：无轮廓
                dotted：点状轮廓
                dashed：虚线轮廓
                solid：实现轮廓
                double：双线轮廓
        outline-offset：设置外轮廓与边框的距离，政府之都可以设置。

   注意：outline-offset 不是 outline 的子属性，是一个独立的属性。

        outline复合属性：

   outline:50px solid blue; 

       7、CSS新增文本属性

       7.1 文本阴影

        在CSS3中，我们可以使用 text-shadow 属性给文本添加阴影。
        语法：  

        text-shadow : h-shadow v-shadow blur color ;

         默认值：text-shadow:none 表示没有阴影。

        7.2 文本换行

        在CSS3中，我们可以使用 white-space 属性设置文本换行方式。
        常用值如下：

        7.3 文本溢出

        在CSS3中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
        常用值如下：

     注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible

值， white - space 为 nowrap 值。

        7.4 文本修饰 

        CSS3升级了 text-decoration属性，让其变成里复合属性

text-decoration : text-decoration-line || text-decoration-style || text-decoration-color

        子属性及其含义： 

     text- decoration - line 设置文本装饰线的位置

• none ： 指定文字无装饰 （默认值）
• underline ： 指定文字的装饰是下划线
• overline ： 指定文字的装饰是上划线
• line-through ： 指定文字的装饰是贯穿线

   text - decoration - style 文本装饰线条的形状

• solid ： 实线 （默认）
• double ： 双线
• dotted ： 点状线条
• dashed ： 虚线
• wavy ： 波浪线

   text- decoration - color 文本装饰线条的颜色