css 详情

• chrome/safari -webkit
• firefox -moz
• ie -ms
• opera -o

查看属性支持情况网站

https://www.caniuse.com

css 参考手册

https://css.doyoe.com

• 预处理器 pre-processor

  less/sass cssNext 插件(css4.0 的标准)

• 后处理器 post-processor

  autoprefixer

postCSS

• 用 js 实现的 css 的抽象的 AST 语法树与 cssNext 和 autoprefixer 结合紧密
• 主要形成 AST 语法数交给其他插件使用

cssNext

• 用来实现一些未来的标准的（未完全在各大浏览器实现）

• 例如:

:root {
  --headline--color: #333;
}

/* 将h1 h2 h3打包成healine */
@custom-selector: --healine h1,h2,h3;
:--healine {
  color: var(--headline--color);
}

css3 选择器部分

• E+F 下一个满足条件的兄弟元素节点

• E~F 下一堆满足条件的兄弟节点

• div[data~='a'] 属性值里面有一个独立 a 的元素，只有一个 a 或者 a 左右有空格

• div[class|='a'] 选择以 a 开头或者以 a-开头

• div[attr^='a'] 正则匹配

• div[attr$='a'] 正则匹配

• div[attr*='a'] 只要里面存在 a

伪元素选择器

这两个选择器必须写两个冒号

• E::placeholder 只能改变默认的字体颜色
• E::selection 鼠标框选住内容
• E:only-of-type 仅一个类型元素 E 的，如果有多个 E 不能选中
• div:empty{}
• input:enabled
• input:disabled
• input:read-only{}; css 里 readonly 需要改成中划线
• E:not(s)
• E:root
• E:target
• E:first-child
• E:last-child
• E:only-child
• E:nth-child(n)
• E:nth-last-child(n)
• E:first-oftype
• E:last-of-type
• E:only-of-type
• E:nth-of-type(n)
• E:nth-of-last-type(n)
• E:empty
• E:checked
• E:enabled
• E:disabled
• E:read-write

border background

• border-top-left-radius:10px 10px; 实际上是有两个值 代表两个方向的圆切割
• border-radius: 20px 10px 10px 10px / 20px 10px 10px 10px, 20px 对应 20px 是一个角

box-shadow

• box-shadow:inset 默认是 outset，不写就是外阴影
• box-shadow 10px(水平偏移量) 10px(垂直偏移量) 10px(blur 模糊值基于偏移之后的边框像两边模糊) 10px(spread 传播扩大往四个方向增加 10 个像素) #0ff(颜色)
• box-shadow inset 0px 0px 0px #fff 可以省略放大值
• 多个阴影使用逗号分隔，多个阴影哪个先写，哪个就在上面
• 重复的设置会加重阴影

other

• transform:scale(1.25,1.25) 横向，纵向
• transtion:all .6s 所有属性动画

border-image

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

linear-gradient(red,yellow) 是一张图片 border-image-slice:10 设置 source 后必须设置 slice border-image-slice:100 100 fill;

background-image

• background-image 可以有多张背景图片
• 如果第一张没加载完，第二张加载完成会优先显示第二张

div {
  background-image: url(source/me.jpeg), url(source/me2.jpeg);
  background-size: 100px 200px, 100px 200px;
  background-repeat: no-repeat;
  background-position: 0 0, 100px 0;
}

• background-origin;一般配合 clip 使用，默认值为 padding-box

  border-box padding-box content-box

• background-position:30px 30px; 受 background-originy 的参数值影响

• background-clip; padding-box 值以外截断不显示 content-box 是 content-box 以外不显示背景 默认是 border-box; text 文字的部分截取背景图片 一般配合 origin 使用

  text 只在 webkit 下生效，必须配-webkit-text-fill-color:transparent;text-fill-color:transparent; 使用

  div {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    transition: all 2s;
  }
  

• background-attachment;

  改变定位属性 默认值 scroll，相对于容器进行定位类似于 fixed 的效果 local 相对于容器里的内容区进行定位 fixed 相对于视口定位，但是不能在容器以外显示

• background-size;

  cover contain 都用一张图片填充背景，都会用容器的一条边和容器的一条变先对齐，然后改变另一条边的比率 cover 一定会用这张图片完完整整填得满的不改变图片状态的前提下 可能会存在超出的风险 contain 在不改变图片的比率下让容器来包含一张完整的图片，可能存在 repeat 的风险

• background-repeat;

  repeat-x repeat-y 只能填一个值，两个值只能写一个如果是 round 和 space 可以写两个 round 拉伸压缩保证填满 space 不会改变图片 size 大小，保证填满，不拉伸压缩图片 round space 可以同时设置

线性渐变 linear-gradient

• linear-gradient(to right,red,#000);

  to top to top right to right bottom 0deg 90deg linear-gradient(to right,red 20px,#000); 20px 为颜色终止位置 linear-gradient(to right,red 20px,#000 60px); 20-60 为 000 ，60 往后是纯 000

径向渐变 radial-gradient

• radial-gradient(circle at 100px 0px,#ddd,#fff ) 圆心位置
• radial-gradient(circle at right bottom,#ddd,#fff ) 圆心位置
• radial-gradient(ellipse at right bottom,#ddd,#fff ) 椭圆圆心位置
• radial-gradient(ellipse closest-side at right bottom,#ddd,#fff )

放射半径

• closest-corner 最近的角截至,
• closest-side 最近的边,
• farthest-corner 最远的角截至
• farthest-side 最远的边

border-color

• css1 css2 border-color :currentColor;currentColor 为中转颜色
• 如果 border-color 没有值会取 currentColor; currentColor 会取 color