css3

属性选择器
        元素[属性=“属性值”]              属性=某个属性值时选中的内容
        元素[属性]  比如 img[title]     有这个属性就选中
        元素[属性~=“属性值”]           属性=某个属性值，或者是多个值其中的一个都识别（词列表）
        元素[属性^=“属性值”]            开头为属性值的内容
        元素[属性$=“属性值”]            结尾为属性值的内容
        元素[属性|=“属性值”]            为属性值或者属性值-都选中   比如  box和box-left
        元素[属性*=“属性值/字母、单词”]        只要属性值中包含其内容都选中
结构性伪类选择器
        元素：first-chlid 
        元素：last-chlid
        元素：nth-chlid（n）          (n/2n+1/2n-1/2n/odd奇数/even偶数)
        元素：only-chlid
        元素：nth-last-chlid（n）
    x代表元素
:first-of-type匹配同级兄弟元素中的第一个X元素
:last-of-type
:nth-of-type（n）
:only-of-type
:nth-last-of-type
目标伪类
        target 匹配的是被url（）指向的元素，必须配合锚点一起使用
UI状态伪类选择器
        ：enabled 匹配表单元素可用状态
        ：disabled 匹配表单元素禁用状态下的内容
        ：checked 匹配表单元素选中状态下的内容
     ：：selection 匹配文本内容被选中的样式（背景颜色和字体颜色 ）
         ：focus 匹配内容光标激活状态下
层级选择器
        父子选择器
            父元素 > 子元素
        相邻兄弟选择器
            哥哥 + 弟弟
        通用原则器
            哥哥元素 ~ 哥哥下面的所有弟弟元素
通过同级的哥哥选择同级下的所有弟弟
    :root 匹配文档的根元素（html）
    x:empty匹配没有任何子元素的元素x(空的元素)

 

属性
    文本阴影(可设多重，用逗号隔开）
        text-shadow: 水平位置 垂直位置 模糊度 颜色
    盒子阴影   box-shadow
        box-shadow: 水平位置 垂直位置 模糊度 阴影大小 颜色 设置内阴影inset
内阴影
水平方向                 正值 左边内阴影/ 负值 右边内阴影
垂直方向                 正值 上边内阴影/ 负值 下边内阴影
     圆角 border-radius
        一个值   四个方向
        两个值   对角方向
        三个值   左上角   右边的对角   右下角
        四个值   顺时针方法

设置正圆或者椭圆   50% 
            设置水平半径或者垂直半径  10px/30px
(0px 0px 0px 0px/0px 0px 0px 0px）

background-size：px/%
                  100% 100% 图片完整显示，占满盒子，比例变形
                  cover  不一定完整显示 占满盒子 等比缩放
                  contain  完整显示，不一定占满盒子，等比缩放
                 100% auto 宽度占满，高度自适应
                  auto 100% 高度占满，宽度自适应
background-size如果放在background里面简写的时候 必须跟位置一起使用 即使位置不动 也要写0px 0px 2个属性之间用/隔开
background：URL  0px 0px / auto 100% no-repeat

背景圆点background-origin
    背景图片显示的区域，背景颜色不能设置
                   border-box
                   padding-box
                   content-box(默认)

背景裁剪background-clip
    背景被裁剪到的区域内显示
              border-box
              padding-box
              content-box(默认)

多重背景的设置
    用逗隔开，设置背景颜色是只能设置在多个背景的最后一个背景前，否则无效

扩展：
    -webkit-background-clip：text;
    -webkit-text-fill-color:transparent;
    设置文本颜色为透明

内容换行
    智能换行word-wrap:break-word
在内容挪到第二行之后超出换行
    粗暴换行word-break：break-all
不挪到第二行就会换行

设置图片边框
border-image：路径 向内偏移 平铺方式
border-image-source:   路径
border-image-slice:       向内偏移
border-image-repeat： 平铺方式
     round铺满/repeat平铺/stretch拉伸（默认）
border-image-outset：  向外偏移
    设置倍数 单独设置

矢量图标设置iconfont
先去下载代码，link关联  两种方法
    设置class=“iconfont 图标对应的class”
iconfont固定的，后面的class是图标对应的class
    设置元素class="icontfont" 元素中间包&#x的16进制名称

pointer-events：auto默认值/none;
    1.防止重复提交
    2.穿透效果

渐变：由浏览器生成，多个颜色之间的过渡，设置前缀是兼容模式，不设置前缀是标准模式
    线性渐变background：linear-gradient（渐变的方向，渐变的颜色，渐变的颜色）
        单一方向
  to bottom  从上到下
  to top  从下到上
  to right
  to left
兼容模式下（相反切不加to）
top 从上到下/bottom/left/right
        多个方向
to left top   从右下到左上
to left bottom
to right top
to right bottom
兼容模式和单一方向一样，相反不加to
        角度值
兼容模式的值=90deg - 标准模式的deg
    径向渐变background：radial-gradient（渐变的中心点，渐变的形状，渐变的大小，颜色，颜色）
形状和大小不能一起用
        渐变的中心点：center/px/%
                            水平方向 垂直方向
        渐变的形状
                          circle圆/ellipse椭圆
        渐变的大小
                          closest-side 最近边
                          farthest-side 最远边
                         closest-corner 最近角
                         farthest-corner  最远角
    重复性渐变
        重复性线性渐变background：repeating-linear-gradient（red，yellow 15%，green 30%）
        重复性径向渐变background：repeating-radial-gradient（red，yellow 15%，green 30%）
        最后一个元素的%代表第一个渐变的位置占比

设置渐变的方向
                颜色后面都加50%可以再一个盒子中设两个颜色

设置宽度的关键词
width:
        -webkit-fill-available   可以让行内块元素的宽度自适应（必须加浏览器前缀，一般前缀在属性前加）
        fit-content              可以让块元素的宽度自动收缩，让内容撑开 
        max-content               内容整体宽度的最大宽（文本内容不会换行）
        min-content               文本内容的最小宽（一个字的宽度，英文内容是整体）
 

浏览器的前缀
    IE浏览器   是 -ms-
    火狐浏览器 是 -moz-
    欧朋浏览器 是 -o-
    谷歌和苹果 是 -webkit-