c3h5-day03

transition属性

 transition:让元素变化的时候有动画效果（过渡效果） */
        参数1：参与过渡的属性，一般写all，代表所有属性都参与过渡，也可以写其他的，写什么就代表什么属性参与过渡
        参数2：过渡的持续时间，记得要加单位s代表多少秒
        参数3：代表延迟几秒执行（延迟时间）
        参数4：运动曲线 linear匀速  steps(n):分n个步骤
        transition加在hover里代表只有悬停时才有过渡效果，写在默认样式里代表悬停和移出恢复时都有过渡效果
        transition: all 2s .5s linear;

        过渡其实是一个复合属性，由多个属性连写的
        transition-property: 参与过渡的属性，写all之类的
        transition-delay: 过渡的延迟时间

 

伪类选择器

  :hover：悬停样式
    :link：未点击时的样式
    :active：点击时的样式
    :visited：访问后的样式

    这是a标签的四种状态样式，但是上面这四个伪类，一般都是给a用的，只有hover所有元素都用

    伪类选择器前面一点有一个冒号

    :xxx-child：必须保证在父元素中是第几个子元素

        :first-child：找到第一个子元素，它在父元素中也必须是第一个子元素
        :last-child：找到最后一个子元素，它在父元素中也必须是最后一个子元素
        :nth-child：找到某个子元素
                nth-child里可以写任意数字，就代表找到第几个
                也可以写n：代表找到所有
                还可以写n+m：代表找到从m开始以及后面所有 例：n+3 从3开始
                还可以写mn: 代表m的倍数   3n 代表3的倍数
                还可以写even：代表偶数
                还可以写odd：代表奇数

box-shadow盒子阴影属性:

 盒子阴影
            参数1：水平偏移位置
            参数2：垂直偏移位置
            参数3：模糊度，值越大越模糊
            参数4：阴影的宽度,哪怕宽度为0其实阴影也有宽度，只不过是跟盒子一样宽，这个宽度其实是设置阴影四周再加多少宽度
            参数5：阴影的颜色
            参数6：是否为内阴影，加一个inset就是内阴影，不加就是外阴影 inset也可以加在最前面，建议加最后

            多个阴影之间，用逗号隔开，先写的阴影，层级最高

text-shadow文字阴影属性

参数1：水平偏移

参数2：垂直偏移

参数3：模糊度

参数4：阴影颜色 它的阴影大小是跟文字一样大的！不可以改阴影大小，除非改文字大小

background属性详解

   参数1：背景图片的路径，路径包不包引号都无所谓
            参数2：是否平铺，默认是repeat代表水平和垂直都平铺
                        no-repeat：代表不平铺，常用
                        repeat-x：水平方向平铺
                        repeat-y：垂直方向平铺
            参数3：背景图片偏移位置
                        它需要写两个，第一个代表水平对齐，第二个代表垂直对齐
                        水平对齐：left,right,center
                        垂直对齐：top,bottom,center

                        如果希望水平和垂直都居中，可以只写一个center

                        除了写这几个单词外，还可以写偏移的像素位置
                        水平写负代表向左，写正代表向右
                        垂直写负代表向上，写正代表向下

                        除了写像素外，还可以写百分比,用的少
                        写正百分比代表向左和向上，给负代表向右和向下
                        写百分比跟像素的方向是相反的

            参数4：指定图片的大小，它一定要写在参数3的后面，而且要加一个/
                    可以给具体的像素，也可以给盒子的百分比，第一个代表宽，第二个代表高

                    还有特殊的两个值：
                                cover：它一定会让图片覆盖整个盒子，图片可能会超出
                                contain：它一定会让盒子包含住图片，图片不会超出
                    图片一定不会变形，都是按比例缩放

            参数5：背景颜色：注意，如果是多张背景图片，那么颜色一定要写在最后

            如果多张背景图片，用逗号隔开，另外，最先写的背景图片层级最高，越后面写的层级越低