css未来显示模块

• 内部显示类型 inner display type

  定义元素内部元素的布局方式

• 外部显示类型 outer display type

  定义元素外部元素的布局方式

css常见知识

• text-decoration(设置文本排版)

• white-space: pre-wrap

  

• 多行溢出省略号

  // 兼容性一般，需要兼容性好的，只能用js处理了
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  

• 白屏和无内容样式闪烁

  • 原因分析

  白屏和无样式内容闪烁的产生主要与浏览器的渲染机制有关，有的浏览器(chrome, 是等待html和css全部加载完成后再进行渲染（白屏问题），有的浏览器(Firefox)是先显示已加载的html内容，等到css加载完成后重新对内容添加样式（FOUC问题）

• 渐进增强，利用@supports检测

  .selector {
    /* Styles that are supported in old browsers */
  }
  
  @supports (property:value) {
    .selector {
      /* Styles for browsers that support the specified property */
    }
  }
  

css3新特性

• scroll-snap （元素平滑定位增强） scroll-snap

• scrollbar-width, scrollbar-color (自定义滚动条)

• font-feature-settings, font-display（字体中的高级印刷功能、加载字体过程中后备字体）

• clip-path （区域内的部分显示，区域外的隐藏）
• stroke-width （指定svg对象的轮廓的宽度）
• object-fit(适用于img标签，类似于背景图的background-size)

• filter(滤镜)

  filter: hue-rotate(0deg) // 色相变化， 给图像应用色相旋转

  • blur 高斯模糊
  • brightness 线性乘法，使其看起来更亮或更暗
  • contrast 对比度
  • drop-shadow 给图像设置一个阴影效果
  • grayscale 转为灰色图像
  • invert 反转输入图像
  • opacity 透明度
  • saturate 图像饱和度
  • sepia 将图像转换为深褐色

• border-image （允许在元素的边框上绘制图像）

• box-shadom

• shape-outside 非矩形的形状

  polygon（多边形）、circle、ellipse（椭圆）、path

• perspective （透视，景深）

• gradient (渐变)
• mask-composite(遮罩)

• mix-blend-mode(混合模式) / background-blend-mode

  当层重叠时计算像素最终颜色值，以此来修改图片颜色。

  normal

  multiply

  screen

  overlay

  darken

  lighten

  color-dodge

  color-burn

  hard-light

  soft-light

  difference

  exclusion

  hue

  saturation

  color

  luminosity

• css-variables(–css)

  :root{ 
    --color: red;
    a {
      color: var(--color);
    }
  }
  
  /* scss */
  $color: red;
  color: $color;
  
  /* less */
  @color: red;
  color: @color;
  

• Houdini - js in css(css parsing api, css layout api, CSS Properties and Values API, Worklets)

參考资料

参考引用

css滚动进度条效果