CSS3新增功能

1 CSS3选择器详解

1.1 基础选择器

  • 通配选择器*
  • 元素选择器E
  • ID选择器#id
  • CLASS选择器.class
  • 群组选择器select1,selectN
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS基本选择器</title>
    <style type="text/css">
        /*ID选择器*/
        #myFriend {                    /*id的优先级最高*/
            color: #f90;
        }


        /*CLASS选择器*/
        .first-item {
            width: 900px;
        }

        .item {
            width: 700px;
            padding: 20px;
            border: 1px solid #369;
        }

        * {
            /*border:2px solid red;*/
        }

        /*list下的所有li*/
        .list li {
            /*border: 1px solid orange;*/
        }
        /**/
        .list>li {
            border: 1px solid orange;
        }

        /*群组选择器 或者 or*/
        h1,hr,p,.item {

        }

        /* and */
        p.item {

        }

        .item.first-item{
            
        }


    </style>
</head>
<body>
    <h1 id="yourFrind">CSS选择器</h1>
    <hr>

    <ul>
        <li>啊手动阀</li>
        <li>啊手动阀</li>
        <li>啊手动阀</li>
    </ul>

    <hr>

    <ul class="list">              <!--一般遇到列表类型布局我们就使用<ul><li>列表标签布局。-->
        <li>了撒旦发射点法发</li>
        <li>了撒旦发射点法发</li>
        <li>了撒旦发射点法发
            <ul>
                <li>撒发射点法按时打发</li>
                <li>撒发射点法按时打发</li>
                <li>撒发射点法按时打发</li>
                <li>撒发射点法按时打发</li>
            </ul>
        </li>
        <li>了撒旦发射点法发</li>
        <li>了撒旦发射点法发</li>
        <li>了撒旦发射点法发</li>
        <li>了撒旦发射点法发</li>
    </ul>

    <p class="item">撒旦萨芬记录卡是否健康拉法基</p>
    <p class="first-item item">撒旦萨芬记录卡是否健康拉法基</p>
    <p>撒旦萨芬记录卡是否健康拉法基</p>
    <p id="myFriend">撒旦萨芬记录卡是否健康拉法基</p>
    <p>撒旦萨芬记录卡是否健康拉法基</p>
    <p class="item">撒旦萨芬记录卡是否健康拉法基</p>
    <p>撒旦萨芬记录卡是否健康拉法基</p>
    <hr>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
CSS基本选择器

1.2 层级选择器

  • 后代选择器 E F
  • 子选择器 E>F
  • 相邻兄弟选择器 E+F
  • 通用兄弟选择器 E~F
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3层级选择器</title>
    <style>
        li {
            width: 500px;
            padding: 10px;
            margin-top:10px;
        }
        
        /*将无序列表前的小圆点都去掉，但是缩进依然存在*/
        ul {
            list-style: none;
        }

        /*将类为item选择器的元素加上红色的边框*/
        .item {
            border: 1px solid red;
        }

        /*加号的意思是将紧邻item后的兄弟li加上边框，而不是所有的li*/
        .item+li{
            border:2px solid green;
        }

        /*波浪号的意思是给item选择器后面所欲的兄弟选择器加上屎黄色的框*/
        .item~li{
            border:2px solid orange;
        }

    </style>
</head>
<body>
    
    <ul>
        <li>1Lorem ipsum dolor sit amet.</li>
        <li class="item">2Lorem ipsum dolor sit amet.</li>
        <li>3Lorem ipsum dolor sit amet.</li>
        <li>4Lorem ipsum dolor sit amet.</li>
        <li>5Lorem ipsum dolor sit amet.</li>
    </ul>

    <ol>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ol>
</body>
</html>
CSS3层级选择器

1.3 属性选择器

  • E[attr] 选择具有att属性的E元素。
  • E[attr="val"] 选择具有att属性且属性值等于val的E元素。
  • E[attr~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。
  • E[attr^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
  • E[attr$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素。
  • E[attr*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
  • E[attr|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 属性选择器以属性名开头后面加中括号的选择器 -->
    <title>属性选择器</title>
    <style>
        #box img {
            width:100px;
        }
        
        /*有title属性的img元素---------无论值为多少都可以，只要有title就可以被选择器选中*/
        img[title] {
            border:2px solid green;
        }
        /*title属性值是hello 的img元素------不仅要有title而且值要为hello的img元素才能被选中*/
        img[title="hello"] {
            border:2px solid red;
        }
        /*title的属性值 以hello开头的img元素*/
        img[title^="hello"] {
            border: 2px solid black;
        }
        /*alt属性以a结尾的 img元素*/
        img[alt$="a"] {
            border: 5px solid purple;
        }
        /*alt属性值包含h 的img元素*/
        img[alt*="h"]{
            border: 5px solid pink;
        }
        
        /*了解  title属性值中 有空格隔开的hello 的img元素----hello前后只要有空格，无论前后有没有元素都会被选中*/
        img[title~="hello"] {
            border:10px solid blue;
        }
        /*了解  title属性值中以world开头，后面跟-  的img元素*/
        img[title|='world'] {
            border: 10px solid skyblue;
        }
        
        /*类为item的元素，有属性名为name的元素将被选中*/
        .item[name] {
            color: red;
        }

        /*多个属性作为条件*/
        /* title属性值包含hello， 并且有alt属性 的img元素*/
        img[title*='hello'][alt] {

        }
    
    </style>
</head>
<body>
    <div id="box">
        <img src="../../dist/images_one/10.jpg" alt="lala" >
        <img src="../../dist/images_one/9.jpg" title="world-hello" id="myImg" alt="wohao">
        <img src="../../dist/images_one/8.jpg" title="hello world" alt="nihoa">
    </div>

    <p class="item">Lorem ipsum dolor sit amet.</p>
    <p class="item" name="haha">Lorem ipsum dolor sit amet.</p>
    <p class="item">Lorem ipsum dolor sit amet.</p>
    <p class="item">Lorem ipsum dolor sit amet.</p>
</body>
</html>
属性选择器

1.4 伪类选择器

动态伪类选择器

  • E:link

      设置超链接a在未被访问前的样式。

    注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后

  • E:visited

      设置超链接a在其链接地址已被访问过时的样式。

  • E:hover

      设置元素在其鼠标悬停时的样式。

  • E:active

      设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

  • E:focus

      设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态伪类选择器</title>
    <style>

        /*设置超链接中的字体大小*/
        a {
            font-size: 30px;
        }
        
        /*设置超链接 在不同状态时的颜色*/

        /*未访问过的-----当超超链接的地址是一个不可以访问的内存地址就会显示我们设置的字体颜色，能正常访问的则不会显示*/
        a:link {
            color: green;
        }
        /*访问过后------也就是能正常访问的网址，则会则会显示当前的颜色，否则不会显示当前设置的颜色*/
        a:visited {
            color: yellow;
        }
        /*鼠标悬停------无论地址能不能访问只要鼠标放到超链接对应的文本内容上就会显示我们当前设置的红色*/
        a:hover {
            color: red;
        }
        /*激活状态 鼠标按下时-----鼠标按下时将显示我们设置的颜色蓝色，松开则直接进入指定的超链接的地址网站*/
        a:active {
            color: blue;
        }
        /* link visited hover active */
        /* love hate  又爱又恨 */

        
        .list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .list li {
            width: 600px;
            padding: 10px;
            margin-top:10px;
            border: 1px solid #999;
        }
        /*鼠标悬停*/
        .list li:hover {
            background: pink;
            color: #fff;
            border:1px dashed #999;
        }


        /*获取焦点*/
        .user-input {
            width: 300px;
            height: 40px;
            border: 1px solid #ccc;        
        }
        .user-input:focus {
            border: 1px dashed orange;
            outline: none;
        }
    </style>
</head>
<body>
    <h1>伪类</h1>
    <hr>

    <div class="link-group">
        <a href="http://www.baidu.com">百度</a> <br>
        <a href="http://www.qq.com">QQ</a> <br>
        <a href="http://www.hao123.com">123</a>
    </div>

    <ul class="list">
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>

    <hr>
    <input type="text" class="user-input">

</body>
</html>
动态伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现下拉菜单</title>
    <style>
        /*去掉一些元素自带的内边距和外边距*/
        * {
            padding: 0;
            margin: 0;
        }
        /*先给整体的文本内容设置字体大小以及字体类型以及非衬线*/
        body {
            font:14px "Microsoft YaHei",sans-serif;
        }
        /*将所有无序列表前面的小圆圈去掉*/
        ul {
            list-style: none;
        }

        /*设置整体文本内容容器的水平居中个，并设置宽度*/
        .container {
            margin: 0 auto;
            width: 1000px;
        }


        /*将导航栏的宽度设置为100%，默认的也是100%，设置文本内容的高以及行高和背景颜色*/
        .nav {
            /*margin-top: 60px;*/
            width: 100%;
            height: 40px;
            line-height: 40px;  /*文本内容基线与基线之间的高度，这样也可以设置两行文本内容之间的距离*/
            background: #333;
        }
        
        /*一级菜单*/ /*该选择器会选择 所有li------这样一级菜单和二级菜单都会变为横向的，我们只希望一级菜单是横向的，二级菜单任然是竖着排列的*/
        .nav li {
            float: left;
            position: relative;
        }
        


        /*一级菜单-------设置为块状元素 ，并将文本内容进行居中*/
        .nav li a {
            display: block;   /*设置为块状元素独占一行*/
            width: 100px;
            text-align: center; /*将文本内容进行居中，相对包含文本内容的框进行居中*/
            color: #fff;
            text-decoration: none;  /*默认的文本修饰就是none，还可以设置为上划线、下划线、文本内容穿过即overlineunderlineline-through*/
        }

        /*二级菜单*/
        .nav li ul li a {
            color: #333;
        }

        /*将二级菜单的内容设置为不浮动，这样就可以办为竖排的了*/
        .nav li ul li {
            /*覆盖前面设置  */
            float: none;
        }
         
         /*重点理解*/
        .nav li ul {
            /*border: 1px solid #ccc;
            border-top: none;*/
            background: #fff;    /*设置二级菜单的颜色为白色*/
            /*二级菜单先隐藏*/
            display: none;

            /*绝对定位*/
            position: absolute;   /*相对一级菜单的父元素的先对定位进行定位。绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样*/
            left:0;
            top:;
        }

        
        /*划过那个li 哪个li就变红,----当鼠标点上式颜色就会变红*/
        .nav li:hover {
            background: red;
        }

        /*设置点击一级菜单时会显示二级菜单的竖排内容，将点击鼠标是设置属性设置为块状元素*/
        .nav li:hover ul{
            /*display: block;*/
            display: inline-block;

        }

        /*设置banner*/
        .banner img {
            width: 100%;   /*100%是充满整个屏幕，如果不设置只会显示真实图片的大小*/
        }
    </style>
</head>
<body>
    
    <div class="nav">
        <div class="container">
            <ul>
                <li><a href="#">首页</a></li>
                <li>
                    <a href="#">博客</a>
                    <ul>
                        <li><a href="#">同志博客</a></li>
                        <li><a href="#">小同志博客</a></li>
                        <li><a href="#">老同志博客</a></li>
                        <li><a href="#">大同志博客</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">论坛</a>
                    <ul>
                        <li><a href="#">同志论坛</a></li>
                        <li><a href="#">红色论坛</a></li>
                        <li><a href="#">黄色论坛</a></li>
                        <li><a href="#">绿色论坛</a></li>
                    </ul>
                </li>
                <li><a href="#">关于我们</a></li>
                <li>
                    <a href="#">举报我们</a>
                    <ul>
                        <li><a href="#">涉黄</a></li>
                        <li><a href="#">涉黑</a></li>
                        <li><a href="#">涉赌</a></li>
                        <li><a href="#">涉毒</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>


    <div class="banner">
        <img src="../../dist/images_one/meinv02.jpg" alt="">
    </div>
</body>
</html>
应用：导航下拉菜单

目标伪类选择器

  • E:target

      匹配相关URL指向的E元素。

语言伪类选择器

  • E:lang(fr)

      匹配使用特殊语言的E元素

UI元素伪类选择器

  • E:checked

      匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

  • E:enabled

      匹配用户界面上处于可用状态的表单元素

  • E:disabled

      匹配用户界面上处于禁用状态的表单元素

结构伪类选择器

  • E:root

      匹配E元素在文档的根元素。在HTML中，根元素永远是HTML

  • E:first-child

      匹配父元素的第一个子元素E。

  • E:last-child

      匹配父元素的最后一个子元素E。

  • E:only-child

      匹配父元素仅有的一个子元素E。

  • E:nth-child(n)

      匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。

  • E:nth-last-child(n)

      匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。

  • E:first-of-type

      匹配同类型中的第一个同级兄弟元素E

  • E:last-of-type

      匹配同类型中的最后一个同级兄弟元素E

  • E:only-of-type

      匹配同类型中的唯一的一个同级兄弟元素E

  • E:nth-of-type(n)

      匹配同类型中的第n个同级兄弟元素E

  • E:nth-last-of-type(n)

      匹配同类型中的倒数第n个同级兄弟元素E

  • E:empty

      匹配没有任何子元素（包括text节点）的元素E
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*宽度可以显示框的宽的*/
        .list {
            width: 500px;
        }

        /*框的高度会被内边距撑开，框与框之间的距离会随外边距值得增大而增大*/
        .list li {
            margin-top: 5px;
            border: 1px dashed black;
            padding: 10px;
            background: #fff;
        }
        
        /* 获取所有满足前面选择器的元素   从里面筛选出（自己是兄弟元素中的第一个）*/

        /*当是独生子女时无论从后还是从前都会被选中*/
        /*先找到li元素，在从后li的兄弟元素，或li后代元素的兄弟元素中找到第一个为其添加粉红色背景这个属性*/
        /*分为冒号前和冒号后量部分进行分析*/
        .list li:first-child {
            background: pink;
        }

        /*先找到li元素，在从后li的兄弟元素，或li后代元素的兄弟元素中找到最后的一个元素为其添加屎黄色背景这个属性*/
        .list li:last-child {
            background: orange;
        }

        /*先找到li元素，在从后li的兄弟元素，或li后代元素的兄弟元素中找到第二个元素为其添加灰色背景这个属性*/
        .list li:nth-child(2) {
            background: #ccc;
        }

        /*先找到li元素，在从后li的兄弟元素，或li后代元素的兄弟元素中找到倒数第二个元素为其添加天空蓝背景这个属性*/
        .list li:nth-last-child(2) {
            background: skyblue;
        }

        /*先找到li元素，在从后li的兄弟元素，或li后代元素的兄弟元素中找到是独生子女的元素为其添加红色背景这个属性*/
        .list li:only-child {
            background: red;
        }
        

        /*宽度限制框的宽度，也是限制文本内容的宽度，当文本内容超过该宽度会撑开框的高度，自动换行*/
        .news-list {
            width: 600px;
        }
        /*设置所有框的外边距和内边距以及框的边框的颜色*/
        .news-list p {
            margin:0;
            padding: 20px;
            border: 1px solid #ccc;
        }
        /*奇数行变色---------设置边框为第奇数边框的背景颜色为深灰色*/
        .news-list p:nth-child(odd) {
            background: #ccc;
        }
        /*偶数行变色---------设置边框为第偶数边框的背景颜色为浅灰色*/
        .news-list p:nth-child(even) {
            background: #eee;
        }

    </style>
</head>
<body>
    <h1>伪类 结构</h1>
    <hr>

    <!-- 无序数列默认是实心的原点 -->
    <ul class="list">
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.
            <!-- 有序列表默认序号是数字从小到大 -->
            <ol>
                <li>12345667</li>
                <li>12345667</li>
                <li>12345667</li>
                <li>12345667</li>
            </ol>
        </li>
        <li>Lorem ipsum dolor sit amet.
            <!-- 子元素的无序数列默认是空心原点 -->
            <ul>
                <li>你好你好 独生子女</li>
            </ul>
        </li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>

    <hr>

    <div class="news-list">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, ab.</p>
    </div>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类-of-type</title>
    <style>
        /*设置上下的外边距为100，左右自动就是是居中，如果不加边框我们可能看不到是居中，但是加上边框我们可以立马看到确实是居中，文本内容的宽度设置800，超过宽度会自动换行*/
        .newslist {
            margin: 100px auto;
            width: 800px;
        }
        
        /*同时将类为item以及元素为p的元素剑圣边框，为了让文本内容不紧挨着边框我们为其加上了内边距，为了让边框与边框之间有距离感我们为其加上了外边距*/
        .item,p{
            margin: 10px 0;
            padding: 10px;
            border: 1px dashed orange;
        }
        
        /*为同类型的兄弟元素或者后代同类型的兄弟元素加上粉红色的背景颜色*/
        .newslist p:last-of-type{
            background: pink;
        }

        /*将类newslist中的后代元素类为item的元素设置为同类型中的第一个元素这是为红色背景*/
        .newslist .item:first-of-type {
            background: red;
        }
    </style>
</head>
<body>
    <div class="newslist">
        <p>Lorem ipsum dolor sit amet.</p>
        <div class="item">Lorem ipsum dolor sit amet.</div>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
        <div class="item">Lorem ipsum dolor sit amet.</div>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
        <div class="item">Lorem ipsum dolor sit amet.</div>
    </div>
    
</body>
</html>
伪类-of-type

否定伪类选择器

  • E:not(s)

      匹配不含有s选择符的元素E

1.5 伪元素选择器

  • E:first-letter/E::first-letter

      设置对象内的第一个字符的样式。

  • E:first-line/E::first-line

      设置对象内的第一行的样式。

  • E:before/E::before

      设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

  • E:after/E::after

      设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

  • E::placeholder

      设置对象文字占位符的样式。

  • E::selection

      设置对象被选择时的样式。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>

        .message {
            width: 400px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        /*设置类为message的选择器的元素文本内容的首个字符的字体大小的默认的字体大小的3倍*/
        .message::first-letter {
            font-size: 3em;
        }
        /*设置message类的选择器的第一行的文本内容的颜色为粉红色*/
        .message::first-line {
            color: pink;
        }

        /*在message类的选择器的元素插入一个子元素*/
        .message::before {
            content:'你好';
        }

        /*在message类选择器的最后面插入一个子元素*/
        .message::after {
            content:'大家好';
            display: block;   /*将其设置为块状元素，否则设置宽高将不起作用，宽高只会被内容撑开*/
            width: 200px;
            height: 100px;
            border: 1px solid red;
            margin: 10px;
        }


        .nav li {
            float: left;
        }
        .clearfix::after {
            content:'在元素的后面插入的内容';
            display: block;   /*设置块状元素独占一行*/
            clear:both;   /*消除元素对后面元素的影响，如果不设置插入的内容，就会跑到浮动元素的后面，而不会另起一行*/
        }
        
        /*这只对象被选择时的样式。设置message类选择器选中时的文本内容的背景颜色为紫色*/
        .message::selection {
            background: purple;
        }
        

        /*设置文字占位符的样式*/
        input::placeholder {
            color: red;
        }

    </style>
</head>
<body>

    <input type="text" placeholder="请输入用户名">
    <!-- 如果文本内容不设宽度会一致在一行显示 -->
    <p class="message">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam laborum accusamus voluptate harum, ipsam, maiores perferendis non culpa, distinctio esse voluptatibus mollitia illum maxime ratione nisi, et. Vitae, at?
    </p>
    hr
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur aliquid velit perspiciatis. Natus quas eos ipsa excepturi at deleniti alias commodi delectus ad, itaque. Ea itaque molestiae, tenetur? Aliquam!
    </p>


    <hr>

    <div class="header">
        <h1>Header</h1>
    </div>
    <div class="nav clearfix">
        <ul>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>
    </div>
    
    

    <div class="main clearfix">
        <h1>main</h1>
    </div>
</body>
</html>
伪元素选择器

2 CSS3 基本功能

2.1 CSS3新增长度单位

  • rem 相对于根元素(即html元素)font-size计算值的倍数
  • vm 视口被均分为100单位的vw
  • vh 视口被均分为100单位的vh
  • vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
  • vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

2.2 CSS3新增颜色单位

  • RGBA(R,G,B,A) A：Alpha透明度。取值0~1之间。

  • HSL(H,S,L)

    H: Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

    S：Saturation(饱和度)。取值为：0.0% - 100.0%

    L：Lightness(亮度)。取值为：0.0% - 100.0%

  • HSLA(H,S,L,A)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
        html {
            font-size:100px;
        }
        body {
            font-size: 16px;
        }
        #box {
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            -ms-border-radius:10px;
            -o-border-radius:10px;
            border-radius: 10px;    /*设置框的四个圆角*/

            /*如果没有设置background的属性值，插入的背景图片就会水平和垂直方向进行重复平铺，如果设置属性值为repeat-x是只有水平位置重复图片，repeat-y只有垂直方向重复图片，no-repeat背景图片不会重复.但是我们可以通过设置款宽高来限制他*/

            background:url('../../dist/images_one/8.jpg');
            background: url(../../dist/images_one/10.jpg);
            /*要在设置图片之后进行设置*/
            background-size:cover;
        }

        #box p{
            padding: 20px;
            background: rgba(10,10,10,0.5);/*不透明度，值越大越不透明,值0到1的小数*/
        }

    </style>
</head>
<body>
    <div id="box">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>

    <hr>

    <div class="item">
        <p>
            Hello，小侯
        </p>
    </div>
</body>
</html>
css3颜色单位

2.3 CSS3渐变(了解)

线性渐变

语法

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值

<angle>：用角度值指定渐变的方向（或角度）。
    to left： 设置渐变为从右到左。相当于: 270deg
    to right：设置渐变从左到右。相当于: 90deg
    to top：  设置渐变从下到上。相当于: 0deg
    to bottom： 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
    <color>：  指定颜色。
    <length>： 用长度值指定起止色位置。不允许负值
    <percentage>： 用百分比指定起止色位置。

示例

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

径向渐变

语法

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

<position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape> = circle | ellipse

<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

<circle-size> = <length>

<ellipse-size> = [ <length> | <percentage> ]{2}

<shape-size> = <length> | <percentage>

<color-stop> = <color> [ <length> | <percentage> ]?

取值

<position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
    <percentage>①：用百分比指定径向渐变圆心的横坐标值。可以为负值。
    <length>①：用长度值指定径向渐变圆心的横坐标值。可以为负值。
    left：设置左边为径向渐变圆心的横坐标值。
    center①：设置中间为径向渐变圆心的横坐标值。
    right：设置右边为径向渐变圆心的横坐标值。
    <percentage>②：用百分比指定径向渐变圆心的纵坐标值。可以为负值。
    <length>②：用长度值指定径向渐变圆心的纵坐标值。可以为负值。
    top：设置顶部为径向渐变圆心的纵坐标值。
    center②：设置中间为径向渐变圆心的纵坐标值。
    bottom：设置底部为径向渐变圆心的纵坐标值。

<shape> 确定圆的类型
    circle：指定圆形的径向渐变
    ellipse：指定椭圆形的径向渐变。

<extent-keyword> circle | ellipse 都接受该值作为 size
    closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
    closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
    farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
    farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

<circle-size> circle 接受该值作为 size
    <length>：用长度值指定正圆径向渐变的半径长度。不允许负值。

<ellipse-size> ellipse 接受该值作为 size
    <length>：用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
    <percentage>：用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

<color-stop> 用于指定渐变的起止颜色：
    <color>：指定颜色。
    <length>：用长度值指定起止色位置。不允许负值
    <percentage>：用百分比指定起止色位置。不允许负值

示例

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

3 CSS3 新增基本属性

3.1 布局相关属性

  • box-sizing 定义盒子模型的尺寸解析方式 
    >content-box(默认)    
>border-box
  • resize 否允许用户缩放，调节元素尺寸大小 
    none： 不允许用户调整元素大小。 (默认)
both： 用户可以调节元素的宽度和高度。 
horizontal： 用户可以调节元素的宽度     
vertical： 用户可以调节元素的高度。
  • display 盒子是否以及如何显示 
    > none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
> inline： 指定对象为内联元素。 
> block： 指定对象为块元素。 
> list-item： 指定对象为列表项目。 
> inline-block： 指定对象为内联块元素。（CSS2） 
> table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
> inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） 
> table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
> table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
> table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
> table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） 
> table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） 
> table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） 
> table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） 
> table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
> run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
> box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
> inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
> flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
> inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
> flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
> inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
    ​

3.2 外轮廓

  • outline 给元素周围绘制一条轮廓线

    <' outline-width '> || <' outline-style '> || <' outline-color '>

  • outline-width 外廓线宽度

    ： 用长度值来定义轮廓的厚度。不允许负值 medium： 定义默认宽度的轮廓。 thin： 定义比默认宽度细的轮廓。 thick： 定义比默认宽度粗的轮廓。

  • outline-style 外廓线风格

    none： 无轮廓。与任何指定的 <' outline-width '> 值无关 dotted： 点状轮廓。 dashed： 虚线轮廓。 solid： 实线轮廓 double： 双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值 groove： 3D凹槽轮廓。 ridge： 3D凸槽轮廓。 inset： 3D凹边轮廓。 outset： 3D凸边轮廓。

  • outline-color 外廓线颜色

  • outline-offset 外廓线的偏移量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3新增属性</title>
    <style>
        body {
            background: url('../../dist/images_one/8.jpg')
        }
        #box {
            width:200px;
            height:200px;
            padding: 50px;
            border: 1px solid green;
            background: red;
            
            /*改变盒子模型的规则 */
            /*直接改变了盒子模型的布局规则，这样设置宽高就不是内容的宽高，就变成了整个盒子的宽高*/
            box-sizing:border-box;
            
            /*了解：让页面变大变小*/
            resize: both;

            /*外轮廓*/
            /*和border一模一样也是复合属性*/
            outline:5px yellow solid;

            font-size:30px;
            font-weight: bold;
            /*是把整个盒子变成半透明，字体也变成半透明，rgba只针对颜色不针对内容*/
            opacity: 0.5;
        }

        input {
            outline: none;            /*将输入框的外围边框的样式设置为none*/
            outline-color:red;        /*外围边框的颜色设置为红色*/
            outline-style: dotted;    /*外围边框设置为虚线框*/
        }
    </style>
</head>
<body>
    <div id="box">Hello</div>

    <input type="text">
</body>
</html>
布局相关属性及外轮廓

3.3 颜色

  • opacity 检索或设置对象的不透明度。 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

4 CSS3新增边框和背景属性

4.1 边框圆角

  • border-radius

    设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 如果只提供一个，将用于全部的于四个角。 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

    垂直半径也遵循以上4点。

  • border-top-left-radius 设置或检索对象的左上角圆角边框

  • border-top-right-radius 设置或检索对象的右上角圆角边框

  • border-bottom-right-radius 设置或检索对象的右下角圆角边框

  • border-bottom-left-radius 设置或检索对象的左下角圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3边框</title>
    <style>
        .item {
            display: inline-block;
            width: 200px;
            height: 200px;
            border: 1px solid red;

        
        }
        .item01 {
            border-radius: 100px;   /*将边框的四个角设置为半径为100的圆角*/
        }

        .item02 {
            /*左上角*/
            border-top-left-radius: 100px;  /*将框的左上角设置为半径为100的圆角*/
        
            /*右下角*/
            border-bottom-right-radius: 20px;
        }

        .item03 {
            border-radius:100px / 10px;
            /*border-top-left-radius: 100px 20px;   先是水平的圆角在垂直的圆角，即同一个圆心不同的半径*/

            /*border-radius:10px 40px 60px 100px;    设置框的四个角的圆角，设置的位置分别是左上、右上、右下、左下*/
            /*border-radius:50px 10px / 100px 20px;*/
        }
    </style>
</head>
<body>
    
    <div class="item item01"></div>
    <div class="item item02"></div>
    <div class="item item03"></div>
</body>
</html>
css3边框圆角

4.2 盒子阴影

  • box-shadow 设置元素的阴影

    值: none | [ , ]*
    = inset? && {2,4} && ?

    取值：

    ​ none： 无阴影

    <length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 
<color>： 设置对象的阴影的颜色。 
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

    可以设定多组效果，每组参数值以逗号分隔

    test .outset {
    box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
    box-shadow:
        0 0 5px 3px rgba(255, 0, 0, .6),
        0 0 5px 6px rgba(0, 182, 0, .6),
        0 0 5px 10px rgba(255, 255, 0, .6);
}

  • box-reflect 倒影 （仅webkit 了解）

    值: box-reflect：none | ? ?

    取值：

    direction

    above： 指定倒影在对象的上边 
below： 指定倒影在对象的下边 
left： 指定倒影在对象的左边 
right： 指定倒影在对象的右边

    offset

    <length>： 用长度值来定义倒影与对象之间的间隔。可以为负值 
<percentage>： 用百分比来定义倒影与对象之间的间隔。可以为负值

    mask-box-image

    none： 无遮罩图像 
<url>： 使用绝对或相对地址指定遮罩图像。 
<linear-gradient>： 使用线性渐变创建遮罩图像。 
<radial-gradient>： 使用径向(放射性)渐变创建遮罩图像。 
<repeating-linear-gradient>： 使用重复的线性渐变创建背遮罩像。 
<repeating-radial-gradient>： 使用重复的径向(放射性)渐变创建遮罩图像。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <!-- 应用：可以给盒子设置阴影以及阴影的颜色，还可以将一个盒子套多层阴影 -->
    <style>
        /*为类item的所有div元素设置样式，设置边框以及边框之间的距离，并将其设置为inline-block在一行显示*/
        .item {
            display: inline-block;
            margin:20px;
            width: 100px;
            height: 100px;
            border: 1px solid #999;
        }


        /*为类item01的div元素设置盒子异阴影，*/
        .item01 {
            box-shadow: 5px 3px;  /*第一个值代表水平向右的阴影的宽度，第二个值代表垂直向下的阴影的宽度*/
        }

        /*为类item02的div元素设置盒子异阴影，并设置阴影的颜色*/
        .item02 {
            box-shadow: 3px 3px #ccc;
        }

        /*一般设置四个值即可，外延值可以不用*/
        .item03 {
            /*大部分 需要设置这个几个值*/
            box-shadow: 3px 3px 5px #ccc;  /*第三个参数是模糊值，当模糊值过大时，四周都能看到模糊阴影*/
        }

        /*应用：将盒的水平偏移值设置为0，垂直偏移值不为零，这样就可设置左右和下面有阴影的效果*/
        .item04 {
            /*外延值*/
            /*盒子阴影的完整语法：共五个参数*/
            /*box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;*/
            box-shadow: 0px 3px 3px 3px #ccc;   /*第四个参数是外延值，外延值越大四周框的四周的阴影就越大*/
        }

        .item05 {
            /*多重阴影*/
            /*一个盒子可以设置多组阴影，不同阴影参数用逗号隔开，最后一个用分号*/
            box-shadow: 0px 0px 3px 5px red,
                        0px 0px 3px 10px orange,
                        0px 0px 3px 15px yellow,
                        0px 0px 3px 20px green,
                        0px 0px 3px 25px cyan,
                        0px 0px 3px 30px blue,
                        0px 0px 3px 35px purple;
        }


    </style>
</head>
<body>
    <h1>阴影</h1>
    <hr>


    <div class="item item01">01</div>
    <div class="item item02">02</div>
    <div class="item item03">03</div>
    <div class="item item04">04</div>
    <div class="item item05">05</div>
    <div class="item item06">06</div>

    <hr>

    
</body>
</html>
盒子阴影

4.3 CSS3新增背景属性

background: bg-image bg-position / bg-size bg-repeat bg-attachment bg-origin bg-clip bg-color

  • background-origin 背景图片原点

    取值：
padding-box：(默认值) 从padding区域（含padding）开始显示背景图像。 
border-box： 从border区域（含border）开始显示背景图像。 
content-box： 从content区域开始显示背景图像。

  • backgroun-clip 指定对象的背景图像向外裁剪的区域。

    取值：
padding-box： 从padding区域（不含padding）开始向外裁剪背景。 
border-box： (默认值)从border区域（不含border）开始向外裁剪背景。 
content-box： 从content区域开始向外裁剪背景。 
text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

  • background-size 背景图像的尺寸

    <length>： 用长度值指定背景图像大小。不允许负值。 
<percentage>： 用百分比指定背景图像大小。不允许负值。 
auto： 背景图像的真实大小。 
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

  • CSS3多背景

    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
              url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
           url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <!-- 如何让背景图片充满真整个元素，一般是让设置背景图片充满我们设置的框中，让图片完整显示，而不是只显示一部分 -->
    <style>
        .item {
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            background: url('../../dist/images_one/Meinv02.jpg') no-repeat;
            
            /*设置背景图片的尺寸*/
            background-size: cover; /*优先 铺满元素。 多余的图片裁掉 保证原图比例*/
            background-size: contain; /*优先 保证图片显示完整，可能元素不能铺满。 保证原图比例------不能铺满的部分会用原图继续平铺*/

            background-size:100px 200px;/*指定背景大小*/
            background-size:100% 100%;      /*让图片铺满整个元素，但是可能会有失真*/

            /*复合属性：背景图片地址 位置 铺满方式  不平铺*/
            background: url('../../dist/images_one/Meinv02.jpg') 0px 0px/cover no-repeat;
        }
    </style>
</head>
<body>
    <div class="item">
        
    </div>
</body>
</html>
背景

4.4 CSS3边框图片(了解)

  • border-image

    border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '

复合属性。设置或检索对象的边框样式使用图像来填充。

  • border-image-source 设置或检索对象的边框样式使用图像路径。 值: url

  • border-image-slice 设置或检索对象的边框背景图的分割方式。 值: 浮点数/百分比

  • border-image-width 设置或检索对象的边框厚度。值: 长度值/百分比/浮点数

  • border-image-outset 设置或检索对象的边框背景图的扩展 值: 长度值/浮点数

  • border-image-repeat 设置或检索对象的边框图像的平铺方式。

    值:
stretch： 指定用拉伸方式来填充边框背景图。 
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。 
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。 
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

5 CSS3变换/过渡/动画

5.1 变换(transform)

相关属性

  • transform

    设置或检索对象的转换。

    取值

    none (默认值)无转换

    2D Transform Functions：

    matrix()： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵 
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
translatex()： 指定对象X轴（水平方向）的平移 
translatey()： 指定对象Y轴（垂直方向）的平移 
rotate()： 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义 
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 
scalex()： 指定对象X轴的（水平方向）缩放 
scaley()： 指定对象Y轴的（垂直方向）缩放 
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
skewx()： 指定对象X轴的（水平方向）扭曲 
skewy()： 指定对象Y轴的（垂直方向）扭曲

    3D Transform Functions：

    matrix3d()： 以一个4x4矩阵的形式指定一个3D变换 
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 
translatez()： 指定对象Z轴的平移 
rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略 
rotatex()： 指定对象在x轴上的旋转角度 
rotatey()： 指定对象在y轴上的旋转角度 
rotatez()： 指定对象在z轴上的旋转角度 
scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 
scalez()： 指定对象的z轴缩放 
perspective()： 指定透视距离

  • transform-origin

    设置或检索对象以某个原点进行转换。 用法

    如果提供两个值，第一个用于横坐标，第二个用于纵坐标。 
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。 
3D变形需要制定Z坐标 第三个参数值

    取值

    left  right  center   <lenght>  <percentage>
top bottom  center   <lenght>  <percentage>

  • transform-style

    指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。 flat： (默认)指定子元素位于此元素所在平面内 preserve-3d： 指定子元素定位在三维空间内

  • perspective

    指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。

    none： 不指定透视 ： 指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值

  • perspective-origin

    设置透视点的位置

    用法

    ​ 该属性提供2个参数值。

    如果提供两个，第一个用于横坐标，第二个用于纵坐标。 
如果只提供一个，该值将用于横坐标；纵坐标将默认为center。

    取值

    left  right  center   <lenght>  <percentage>
top bottom  center   <lenght>  <percentage>

  • backface-visibility

    指定元素背面面向用户时是否可见。 决定一个元素背面面向用户时是否可见，需要直接在该元素上定义 <' backface-visibility '> 属性，而不能在其父元素上，因为该属性默认为不可继承。 取值

    visible： (默认)指定元素背面可见，允许显示正面的镜像。 
hidden： 指定元素背面不可见 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变换</title>
    <!-- 变换主要将框进行顺时针旋转一定角度， -->
    <style>
        .box {
            display: inline-block;        /*让行内块元素在一行显示*/
            margin: 30px;          /*设置行内块之间的外边距，即框与框之间的距离*/
            width: 100px;        /*设置文本内容的宽和高*/
            height: 100px;
            border:2px dashed orange;   /*设置边框的宽度、样式、颜色*/

            vertical-align: middle;    /*设置文本内容垂直对其图像，值设置为text-top或text-bottom在这的效果一样，默认的是元素放在父元素的基线上*/
        }


        .item {
            border: 1px solid #999;
            background: #ccc;
            height:99px;
        }


        .item01 {
            /*位移 移动*/
            /*平移用translate*/
            transform: translate(10px, 30px);   /*可以用来代替相对定位，两个值代表的分别是向右和向下平移的距离*/
            transform: translatex(10px) translatey(30px);  /*等价于第一种平移的效果*/
            /*transform: translatey(10px);*/           /*我们还可以设置只往水平或者垂直方向进行平移*/
        }


        /*旋转用rotate*/
        .item02 {
            /*旋转 deg角度  0~360deg*/
            transform: rotate(10deg)           /*以框的圆心进行旋转，指定顺时针的旋转角度即可*/
        }


        /*扭曲旋转即旋转的过程中会改变原图形的样式*/
        .item03 {
            /*扭曲*/
            transform: skewx(10deg) skewy(10deg);
        }

        .content {
            margin: 30px;
            width: 100px;
            height: 100px;
            border: 1px solid #999;
            transform: rotate(10deg);             /*顺时针旋转10度*/
            transform-origin: left top;           /*指定旋转的原点位置，而不是默认的对角线的交点，旋转的原点位置四个角均可选*/
        }
    </style>
</head>
<body>
    
    <div class="box">
        <div class="item item01"></div>
    </div>

        <div class="box">
        <div class="item item02">HELLO</div>
    </div>
    
        <div class="box">
        <div class="item item03">HELLO</div>
    </div>
    
    <hr>


    <div class="content">
        HELLO
    </div>

</body>
</html>
变换

2D变换

2D位移
  • translate(x, y)
  • translatex()
  • translatey()
2D缩放
  • scale(x, y)
  • scalex()
  • scaley()
2D旋转
  • rotate(deg)
2D倾斜
  • skew(x,y)
  • skewx()
  • skewy()
2D矩阵
  • matrix()

3D变换

3D位移
  • translate3d(x, y, z)
  • translatez()
3D缩放
  • scale3d()
  • scalez()
3D旋转
  • rotate3d(x, y, z, a)
  • rotatex()
  • rotatey()
  • rotatex()
3D矩阵
  • matrix3d()
多重变形
-webkit-transform:translate(-50%, -50%) rotate(45deg);
-moz-transform:translate(-50%, -50%) rotate(45deg);
-ms-transform:translate(-50%, -50%) rotate(45deg);
-o-transform:translate(-50%, -50%) rotate(45deg);
transform:translate(-50%, -50%) rotate(45deg);

5.2 过渡(transition)

过渡相关属性

  • transition 检索或设置对象变换时的过渡。

    注意：

    如果只提供一个参数，则为 <' transition-duration '> 的值定义；如果提供二个参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义

    用法 transition：[,]* = [ none | ] || || ||

  • transition-property 设置对象中的参与过渡的属性

    默认值为：all。默认为所有可以进行过渡的css属性。 如果提供多个属性值，以逗号进行分隔。 取值

    none： 不指定过渡的css属性 
all： 所有可以进行过渡的css属性 
<IDENT>： 指定要进行过渡的css属性

    那些CSS属性可以被过渡

    颜色属性
具有长度值 百分比的属性
值是数字的属性 如 z-index  opacity  outline-offset等
变形系列属性
阴影
渐变

  • transition-duration 设置对象过渡的持续时间

    如果提供多个属性值，以逗号进行分隔。

  • transition-timing-function 设置对象中过渡的动画类型

    取值
    ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 http://cubic-bezier.com/ steps([, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

  • transition-delay 设置对象延迟过渡的时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3过渡</title>
    <!-- 过度是一个渐变的过程，也意味着只有值是连续的才有过度的效果例如颜色、长度、位置 -->
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            /*display: block;*/
            /*visibility: visible;*/

            border:10px solid purple;

            
            /*过渡*/
            /* transition:3s; */
            /*transition-property: width,height;*/
            transition-duration: 3s;     /*设置过度的时长*/
            transition-timing-function: ease; /*设置过渡时的方式，ease是先匀加速在匀减速，还可以设置为liner匀速过渡*/
            transition-delay:6s;    /*鼠标悬停在要过渡的元素上6秒后开始过渡*/


            /*复合属性*/
            /*transition: all ease 3s 1s;   /*all是对所有可过渡的元素进行过渡*/
            /*transition: 4s; */  /*只写一个值是过渡的时间*/
            transition: all 4s 1s; /*第二个值是过渡的时间，第三个值是悬停后的延迟时间*/


        }

        /*设置鼠标悬停时过度的背景颜色和边框*/
        .box:hover {
            /*display: none;*/
            /*visibility: hidden;*/
            width: 200px;
            height: 200px;
            background: green;

            border:20px dashed purple;

        }
    </style>
</head>
<body>
    <h1>transition</h1>
    <hr>
    <div class="box">
        
    </div>

    <hr>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore veritatis, ducimus maxime fugiat unde inventore aspernatur mollitia dolor doloribus facere eum libero repudiandae, quisquam, deserunt facilis magni error! Vero.
    </p>
</body>
</html>
CSS3过渡
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡实例</title>
    <style>
        /*过渡前的样式*/
        .item {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            text-align: center;  /*将文本内容进行居中*/
            line-height: 100px;  /*这样距离上下各50*/
            border-radius: 50px;  /*圆角等于宽高的一般得到是一个圆*/
            font-size:30px;    /*设置文本内容字体的大小*/
            cursor:pointer;    /*鼠标滑过时会出现小手*/

            /*过渡*/
            transition: transform 1s;
        }


        /*鼠标悬停时元素会旋转一周即360度*/
        /*设置过渡时的样式*/
        .item:hover {
            transform: rotate(360deg)
        }
    </style>
</head>
<body>
    <h1>同志</h1>
    <hr>

    <div class="list">
        <div class="item">张</div>
        <div class="item">李</div>
        <div class="item">王</div>
        <div class="item">孙</div>
        <div class="item">刘</div>
        <div class="item">杨</div>
        <div class="item">朱</div>
        <div class="item">牛</div>
    </div>
</body>
</html>
过渡实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现下拉菜单</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            font:14px "Microsoft YaHei",sans-serif;
        }
        ul {
            list-style: none;
        }
        .container {
            margin: 0 auto;
            width: 1000px;
        }

        .nav {
            /*margin-top: 60px;*/
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #333;
        }
        
        /*一级菜单*/ /*该选择器会选择 所有li*/
        .nav li {
            float: left;
            position: relative;
        }

        /*一级菜单*/
        .nav li a {
            display: block;
            width: 100px;
            text-align: center;
            color: #fff;
            text-decoration: none;
        }

        /*二级菜单*/
        .nav li ul li a {
            color: #333;
        }
        .nav li ul li {
            /*覆盖前面设置  */
            float: none;
        }

        /*过渡前的样式*/
        .nav li ul {
            /*border: 1px solid #ccc;
            border-top: none;*/
            background: #fff;
            /*二级菜单先隐藏*/
            /*display: none;
*/
            /*绝对定位*/
            position: absolute;
            left:0;
            top:;
            
            overflow: hidden;
            height: 0px;
             
            /*过渡#######################################################################################*/
            transition: height .5s;   /*对高度这个属性进行过渡，过渡时间为0.5秒*/
        }

        
        /*划过那个li 哪个li就变红*/
        .nav li:hover {
            background: red;
        }

        /*过渡后的样式*/
        .nav li:hover ul{
        /*    display: block;*/
            height: 160px;            /*鼠标悬停时高度由过渡前的0在0.5秒时间变为160，刚好完整显示下拉菜单*/
        }

        /*设置banner*/
        .banner img {
            width: 100%;
        }
    </style>
</head>
<body>
    
    <div class="nav">
        <div class="container">
            <ul>
                <li><a href="#">首页</a></li>
                <li>
                    <a href="#">博客</a>
                    <ul>
                        <li><a href="#">同志博客</a></li>
                        <li><a href="#">小同志博客</a></li>
                        <li><a href="#">老同志博客</a></li>
                        <li><a href="#">大同志博客</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">论坛</a>
                    <ul>
                        <li><a href="#">同志论坛</a></li>
                        <li><a href="#">红色论坛</a></li>
                        <li><a href="#">黄色论坛</a></li>
                        <li><a href="#">绿色论坛</a></li>
                    </ul>
                </li>
                <li><a href="#">关于我们</a></li>
                <li>
                    <a href="#">举报我们</a>
                    <ul>
                        <li><a href="#">涉黄</a></li>
                        <li><a href="#">涉黑</a></li>
                        <li><a href="#">涉赌</a></li>
                        <li><a href="#">涉毒</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>


    <div class="banner">
        <img src="../../dist/images_one/meinv02.jpg" alt="">
    </div>
</body>
</html>
应用：导航下拉菜单升级

CSS3触发过渡的条件

  • 伪元素触发
  • 媒体查询
  • JavaScript触发

5.3 动画

关键帧

帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。

关键帧语法

@keyframes { }

：[ [ from | to | ]{ sRules } ][ [ , from | to | ]{ sRules } ]*

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes testanimations {
    from { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20); }
    80% { transform: translate(80px, 0); }
    to { transform: translate(100px, 20px); }
}

@keyframes testanimations{
    0% { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20px); }
    80% { transform: translate(80px, 0); }
    100% { transform: translate(100px, 20px); }
}

相关属性

  • animation 设置对象所应用的动画特效

    如果提供多组属性值，以逗号进行分隔。

    注意：如果只提供一个参数，则为 <' animation-duration '> 的值定义；如果提供二个参数，则第一个为 <' animation-duration '> 的值定义，第二个为 <' animation-delay '> 的值定义

    用法

    animation： <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

  • animation-name 设置对象所应用的动画名称

    必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

  • animation-duration 设置对象动画的持续时间

  • animation-timing-function 设置对象动画的过渡类型

    ease： (默认)平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) step-start： 等同于 steps(1, start) step-end： 等同于 steps(1, end) steps([, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。 cubic-bezier(, , , )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

  • animation-delay 指定对象动画的延迟时间

  • animation-iteration-count 指定动画的具体循环次数

    number:动画循环次数 infinite： 无限循环

  • animation-direction 设置对象动画在循环中是否反向运动

    normal： 正常方向 (默认) reverse： 反方向运行 alternate： 动画先正常运行再反方向运行，并持续交替运行 alternate-reverse： 动画先反运行再正方向运行，并持续交替运行

  • animation-play-state 设置对象动画的状态

    running： 运动 (默认) paused： 暂停

  • animation-fill-mode 设置对象动画时间之外的状态

    none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。 both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3动画</title>
    <!-- 动画效果和过渡很像，但是过渡要触发条件，而动画可以自动完成，不需要触发条件 -->
    <style>
        
        /*关键帧的语法*/
        /*关键帧的动画名是自定义的，可以随便指定*/
        @keyframes myanimate{
            from {
                background: red;
                width:200px;
            }


            /*50%是指时间的50%，我们可以将动画的过渡形式设置为默认的ease这样我们就可以看到时间一般所起到的效果，如果是liner匀速则看不到，*/
            50% {
                width:400px;
            }

            to {
                background: green;
                width:600px;
            }
        }

        .box {
            width: 200px;
            height: 200px;
            border: 2px dashed orange;

            animation-name: myanimate;
            animation-duration: 1s; /*动画持续时间*/
            animation-timing-function: linear;   /*将动画的过渡形式设置为匀速*/
            animation-delay: 0s;   /*动画过渡的延迟时间为0秒*/
            animation-iteration-count: infinite; /*无限循环，过渡完一次会重复循环*/
            animation-direction: alternate; /*多次循环的时候，一次正向动画，一次反向动画*/

            animation-play-state: paused;    /*动画也可以设置为向过渡一样加一个触发条件，将其设置为暂停，那么开始的时候就不会有动画的效果，要加触发条件才可以*/

            /*动画的复合属性*/
            /*animation: myanimate 2s linear 2 alternate;*/
        }

        /*鼠标悬停时触发暂停的动画，触发事件完成动画效果，一旦一开鼠标鼠标就保持移开鼠标时的动画效果*/
        .box:hover {
            animation-play-state: running;
        }
    </style>
</head>
<body>
    
    <div class="box"></div>


</body>
</html>
CSS3动画

6 CSS3嵌入WEB字体

6.1 什么是@font-face

  • 可以把字体放置在服务器上,而不受制于客户端系统字体
  • 浏览器会根据指定的命令将对应的字体下载到本地缓存
  • 1998年@font-face加入到css2中, 但css2.1中又被移出,css3重新加入
  • IE兼容性极好

6.2 @font-face语法

格式

@font-face { 
    font-family: <identifier>; 
    src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*; 
    [<font>];
 }

相关参数

  • identifier 字体名称

  • url 此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径

  • string 字体的格式，主要用来帮助浏览器识别, format(fontType)

    truetype .ttf

    Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+ IE9+

    opentype .otf

    Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+

    Web Open Font Format .woff

    Firefox 3.5+ Chrome 6+ Safari 3.6+ Opera 11.1+ IE9+

    embedded Open Type .eot

    IE4+

    svg .svg

    Chrome 4+ Safari 3.1 + Opera 10+ IOS Mobile Safari 3.2+

  • font 定义字体相关样式

    font-weight
    font-style
    font-size
    font-variant

    font-stretch

兼容性处理

@font-face {
    font-family: 'diyfont';
    src: url('diyfont.eot'); /* IE9兼容模式 */
    src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
         url('diyfont.woff') format('woff'), /* chrome、firefox opera  safari  IE9+ 最佳格式 */
         url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
         url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

6.3 字体工具

web字体定制

web字体转换

6.4 使用字体图标

使用字体图标的优势

  • 相比位图更加清晰
  • 灵活性高，更方便改变大小、颜色、风格等
  • 兼容性好，低版本IE也支持

常用的字体图标库

​

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sui776265233/p/9481804.html