CSS3选择器&阴影&背景尺寸&边框圆角

属性选择器的使用
    1.E[attr] 表示选中标签和属性
        E表示标签的名称
        [] 表示标签中的属性
        attr 属性
    2.E[attr="value"] 表示选中标签和属性 并规定了属性值
    3.E[attr~="value"] 表示选中标签和属性 只要属性值是存在的就可以被选中
    4.E[attr^="value"] 表示选中标签和属性 以xx字符开头就可以被选择中
    5.E[attr$="value"] 表示选中标签和属性 以xx字符结束就可以被选择中
    6.E[attr*="value"] 表示选中标签和属性 只要存在任意字符就可以被选择中
    7.E[attr|="value"] 表示选中标签和属性 必须是以value-开头的属性值才可以被选择中

结构选择器的使用:标签名称排列是有要求

    1.当所有标签名称都是一样的时候:表示在集合中进行选择
    X:first-child{} X表示当前集合的名字 集合下面的第一个子级元素
    X:last-child{} 选择到最后一个
    X:nth-child(参数){}
    X:nth-last-child(参数){}
            参数默认是n 表示选择到所有
            参数可以是数字序号 表示选择到第几个
            倍数 2n 3n 2n-1
            odd、even 奇数  偶数

    2.当标签名称不一样的时候:先筛选成相同的标签组成一个集合 然后在集合中选择
    X:first-of-type{} X表示当前集合的名字 集合下面的第一个子级元素
    X:last-of-type{} 选择到最后一个
    X:nth-of-type(参数){}
    X:nth-last-of-type(参数){}
        参数默认是n 表示选择到所有
        参数可以是数字序号 表示选择到第几个
        倍数 2n 3n 2n-1
        odd、even 奇数  偶数

    只需了解的选择器
        X:root
        X:empty 没有任何子级内容的时候才会显示(包括空格)

    总结结构选择器的使用
        当标签名称一样的时候 X:nth-child(){}
        当标签名称不一样的时候 X:nth-of-type(){}

目标选择器
    用法: :target 只需要给改变的元素添加

层级选择器
    > 直接子级元素
    + 相邻的同级
    ~ 相邻的所有

文本阴影的设置
    属性:text-shadow
    属性值:常用的有4个属性值
        第一个属性水平方向
        第二个属性值垂直方向
        第三个属性值模糊程度
        第四个属性值颜色

盒子阴影
属性:box-shadow
    属性值:常见的属性值有4/5个
        第一个属性水平方向
        第二个属性值垂直方向
        第三个属性值模糊程度
        第四个属性值颜色
        第五个属性值 inset

背景尺寸属性 backgorund-size
    属性值:
        100% 100% 表示宽高百分百 背景图片拉伸变形
        100%      表示宽度100% 高度auto
        cover     覆盖 不会变形 背景图超出父级容器
        contain   覆盖 根据图片的大小进行缩放 不会超出裁切也不会变形

颜色的表达形式
        rgb/rgba
        英文单词
        十六进制
        opacity 透明度
        transparent 透明

    拓展: hsl/hsla
          h： hue 色调 0~360
          s： saturation 饱和度 0~100%
          l： lightness 亮度 0~100%
    

边框圆角属性:border-radius
属性值
    一个属性值:50%~100%/宽高的一半
    两个属性值:左上右下 右上左下
    三个属性值:左上 右上左下 右下
    四个属性值:左上 右上 右下 左下
    八个属性值:左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y