css 中不常用的属性

css 中不常用的属性

2018, Dec 29    

神奇的CSS

  • mask 实现类似Canvas clip效果
  • background-clip 实现背景色&背景图片填充效果
  • background-image: inherit 伪类实现倒影
  • scale(-1) 翻转图片不只有rotate
  • 兄弟选择符 ~ E~F 只能选择 E 元素 之后 的 F 元素
  • clip-path SVG 的 CSS版本 用来实现不规则形状裁剪
  • :root :root伪类匹配文档树的根元素 可用来声明全局css变量
  • :empty :empty伪类:代表没有子元素的元素。这里说的子元素,只计算元素结点及文本(包括空格),注释、运行指令不考虑在内
  • :not 可以选择除某个元素之外的所有元素。
  • :target 锚点接收点击事件
  • font-family: tahoma, arial, ‘Hiragino Sans GB’, ‘\5b8b\4f53’, sans-serif; 从左至右 如果没有该字体使用右面一种字体
  • position: sticky 黏性布局 支持性不是很好!!!
  • animation-play-state 控制动画停止&继续
  • css属性值
    1. initial : 默认值
    2. inherit : 继承
    3. unset : 未设置
    4. revert : 还原
  • vw vh vmin vmax vw、vh是相对于浏览器窗口的百分比 而vmin是比较vw、vh中的较小值 vmax同理 一般用于横竖屏切换
  • background: conic-gradient() 圆锥色阶过渡 兼容性不是很好!!!
  • mix-blend-mode 不同的颜色混合可以实现很炫酷的效果
  • pointer-events: none 实现点击元素下面的内容&内容不可点&内容无hover效果

CSS性能优化

  1. 精简Dom结构

  2. 开启硬件加速

{
    will-change: transform;
    transform: translateZ(0); //旧版本hack
}
  1. 尽可能使用下面四种属性控制动画
position(位置): transform: translate(npx, npx)
scale(比例缩放):transform: scale(n)
rotation(旋转) :transform: rotate(ndeg)
opacity(透明度):opacity: 0...1