CSS3的笔记总结_html/css_WEB-ITnose

（获取到一个元素有多重方式，我们要控制页面上面的元素，必须先得到页面上面的元素,假设你的页面的层级结构比较复杂的时候）

1   //选中.demo 的父元素下面的第二个子元素，并且这个子元素有一个class 属性，它的的值是demo2 .demo:nth-child(2){<br />3  }

border-radius:<br />        1:正圆<br />        2：椭圆   x 轴 ，y 轴的概念.<br />        3:android 机器人<br />        4:小机器猫.<br />box-shadow 边框阴影；可以设置边框的阴影，外阴影，内阴影.<br />border-image:<br />            1:我们可以为边框设置图片，之前设置的都是背景色

而现在我们可以为四个边设置边框图片。<br />        我们只需要一张图，浏览器会自动帮我们进行裁剪。然后我们还可以指定宽度<br />指定边框图片的平铺方式.

                    1：border-image-source 边框图片的路径<br />                    2：border-image-slice 裁剪的方式<br />                    3: border-image-width 边框的宽度<br />                    4: border-image-repeat:round,stretch,repeat<br />【 渐变 】<br />        <strong>线性渐变:</strong><br />                liner-gradient(<br />                         135deg,    需要有一个角度. (顺时针方向)<br />                         yellow 25%,   起始颜色<br />                         green  50%    终止颜色<br />                )<br />        <strong>径向渐变：</strong>一个中心点，朝着四周进行渐变<br />                radius-gradient(<br />                        100px at center center    半径  at   中心点的位置<br />                        yellow   起始颜色<br />                        green     终止颜色<br />                )<br />【 背景 】<br />       <strong>背景尺寸：</strong><br />                我们可以为一个div 设置背景，<br />                1：假设我的背景图片的大小超过了盒子的大小.<br />                我们显示的背景不全面<br />                我们这个时候可以设置背景的大小与盒子的大小一致.<br />                但是我们不能做到盒子变大，背景变大<br />                background-size:contain  cover<br />                     contain: 背景图片始终完全显示，等比例缩放.<br />                     cover:  也会缩放，背景始终填充整个区域

       <strong> 背景原点:</strong><br />               background-origin:  可以设置背景图片的位置.<br />                background-origin:border-box,padding-box,content-box;

                      border-box   背景的原点在border 上面<br />                      padding-box  背景的原点在内边距上面<br />                      content-box   背景的远在content 内容区域

<strong> 背景裁剪：</strong><br />                 background-clip:   border-box,padding-box,content-box;<br />        <strong>多重背景：</strong><br />              url("images/bg1.png") left top no-repeat,<br />              url("images/bg2.png") right top no-repeat,<br />              url("images/bg3.png") right bottom no-repeat,<br />              url("images/bg4.png") left bottom no-repeat,<br />              url("images/bg5.png") center center no-repeat;<br />【 过渡 】 我们要完成过渡，我们需要使用一个transition这样的一个属性<br />        1：补间动画<br />            开始状态，结束状态<br />        2：帧动画    transition: all  5s linear  过渡延迟多少秒执行<br />             （1）设置过渡的属性 （all）  linear 匀速<br />             （2）过渡时间      ease-in<br />             （3）过渡的速度       ease-out    <br /><br />————————————————————————————————————————————————————————————————————————————————————————

【 过渡 】（transtion:all 2s linear 3s;）

    transition 属性<br />    all 需要过渡的属性<br />    2s 过渡这些属性需要执行的时间<br />    linear 过渡的速度<br />    4s 延迟多少秒<br />【 2D——3D转换 】 我们2d 转换和3d 转换，我们都可以使用transform 属性<br />    2d 转换<br />         我们有三种转换效果<br />         ① scale(1.5,2)   放大 大于1；缩小 小于1<br /> ② translate(200px,200px) 向水平方向移动，垂直方向移动，可以接受负值（负值是反方向，百分比）<br /> ③ rotate() 正值顺时针方向，负值是逆时针方向<br />      transform-origin 旋转的中心点的位置；默认的中心点在中间<br />    3d:转换<br /> 掌握一个坐标系，有了x轴，y轴，z 轴的概念。此外，我们想在一个平面实现3d 的效果，我们使用到了透视..

        ① x轴，z轴，y轴的方向 tranlateX(200px) 水平向右移动<br />        ② 围绕x，y，z 轴旋转，角度，旋转.<br />        ③ 旋转的中心点.<br />        <strong>立体盒子：</strong>每一个平面（盒子）都对应一个3d 坐标系

        <strong>透视：</strong>观察者与目标物的距离 ，设置了这个距离之后，我们就可以透过透视产生立体的效果<br />                 transform-origin  旋转的终点的位置<br />                 transform-style:preserve-3d （把子元素放在一个3维空间内）

  【 动画 】 有一个animation属性  （这里有八个值）<br />                1:我要执行那个动画，名称<br />                2:执行动画需要花费的时间<br />                3:速度，执行动画的方式. steps()<br />                4:延迟多少秒执行动画<br />                5:循环的次数.<br />                6:是否交替执行动画.<br />                7:动画结束的状态.<br />                8:动画的暂时，运行状态.

 animation 属性:  move （动画的 名称）

    —— animation:move 10s linear

    动画执行的时间

    动画的速度<br />    延迟时间<br />    循环的次数<br />    动画是否交替的效果 alternate<br />    动画的结束状态 forward<br />    动画的状态  running  paused

1 // 定义动画2 @keyfreames move{3       from{4       }5       to{6       }7 }

 1 //  我们在做动画的时候我们定义一组动画 2  @keyfreames move{ 3            0%{ 4                  } 5            20%{ 6                  } 7            40%{ 8                  } 9            80%{10                  }11            100%{12                  }13   }

<br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />