css特殊操作和效果

(1) CSS中空格的写法

    合 格：{{qualifiedQuantity}}
    不合格：{{unqualifiedQuantity}}

全角空格

(2) css文字竖排显示

    质检合格

(3) 元素横向排列的方式
参考1、参考2

(4) 隐藏

(5) 属性相关

• white-space：处理空白或换行
  

  image.png

• word-wrap：允许长单词换行
  

  image.png

• word-break：实现在任意位置换行
  

  image.png

• overflow：处理内容溢出
  

  image.png

• text-overflow：处理文本溢出
  
  image.png

(6) 阴影

• 四周阴影

    {{_i18n.getLanguage().device.machine}}
    {{lanObj.online}}/{{lanObj.total}}
    {{onlineNum}} / {{machineNum}}

.shape-circle {
    border-radius: 50%;
    // border: 3px #FFFFFF solid;
    width: 400upx;
    height: 400upx;
    background-color: #00A9E2;
    // box-shadow: 0 -1.5px 5px rgba(0, 0, 0, 0.1);
    // box-shadow: darkgrey 0px 0px 30px 5px;
    box-shadow: #FFFFFF 0px 0px 30px 5px;
}

image.png

(7) 透明度

.bg-olive {
    background-color: #8dc63f; 
    opacity: 0.7; 
    color: #ffffff;
}

或

.bg-olive {
    /* background-color: #8dc63f; */
    background:rgba(141,198,63,0.7);//最后一个取值0-1，越小越透明
    color: #ffffff;
}

(8) 渐变 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

.grad {
  background-color: red; /* 浏览器不支持的时候显示 */
  // background-image: linear-gradient(to top,white,#00A9E2);
  background-image: linear-gradient(to top,white 15%,#ADD8E6 55%, #00A9E2 100%);
  //background-image: linear-gradient(bottom,white 15%,#ADD8E6 55%, #00A9E2 100%);
}

关于 css 不均匀渐变百分比：百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。

• 比如background: linear-gradient(red 10%, green 85%, blue 90%)，其中：
  10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
  85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
  90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
  10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
• 比如background: linear-gradient(red 0%, green 50%, blue 50%)和 background: linear-gradient(red 0%, green 50%, blue 10%)的效果一样。这可能是因为百分比位置之间有重叠才失去渐变过渡色，另渲染有一定先后顺序吧（姑且这么认为）。

(9) border: 1px solid rgba(0, 0, 0, 0.1);
元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。其中，rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255），最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。
(10) 背景混合 mix-blend-mode

image.png

注意：必须在紧邻的第一个父节点设置背景，才能实现与背景融合。

loading-white.png

loading-black.gif

黑色动态图和背景色融合.gif

拓展：滤色混合模式screen

• 滤色计算公式

  
  
  滤色计算公式.png
  
  

  如有一个红色，其RGB值是(255,0,0)，还有一个蓝色，其RGB值是(0,0,255)，则这两个颜色使用滤色混合模式之后的颜色色值是：
  R = 255 – (255 – 255) * (255 – 0) / 255 = 255
  G = 255 – (255 – 0) * (255 – 0) / 255 = 0
  B = 255 – (255 – 0) * (255 – 255) / 255 = 255
  于是最终的色值是 RGB(255,0,255)

• 滤色模式特征
  任何颜色和黑色执行滤色，还是呈现原来的颜色（如将图片、动画或视频的底色做成黑色，就能很好的和网页背景融为一体）
  任何颜色和白色执行滤色得到的是白色；
  任何颜色和其他颜色执行滤色模式混合后的颜色会更浅，有点类似漂白的效果
• 应用场景：滤色模式对于在图像中创建霓虹辉光效果是非常有用