Css常用样式

1. 玻璃效果

参考网站 css.glass/

.glass-effect{
   -webkit-backdrop-filter: blur(6.2px);
   backdrop-filter: blur(6.2px);
   background: rgba(255, 255, 255, 0.4);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.24); 
}

2. 文本框抖动效果

<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>

input:invalid{
      animation: shake 0.2s ease-in-out 0s 2;
      box-shadow: 0 0 0.4em red;
}
  @keyframes shake {
      0% { margin-left: 0rem; }
      25% { margin-left: 0.5rem; }
      75% { margin-left: -0.5rem; }
      100% { margin-left: 0rem; }
}

3. 文本溢出

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  width: 200px;
 }
div.text {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}  
div.text:hover {
  overflow: visible;
}

4. 插入换行

<div class="content">
  <span class="br">海客談瀛洲，煙濤微茫信難求。</span>
  <span class="br">越人語天姥，雲霞明滅或可覩。</span>
  <span class="br">天姥連天向天橫，勢拔五嶽掩赤城。</span>
  <span class="br">天台四萬八千丈，對此欲倒東南傾。</span>
</div>

content {
  .br::after {
    content: "\A";
    white-space: pre;
  }
}

5. 简单表格-参数列表

<div class="params-container">
  <div class="param-item">
    <div class="param-cell font-bold">key</div>
    <div class="param-cell font-bold">value</div>
  </div>
  <div class="param-item">
    <div class="param-cell">message</div>
    <div class="param-cell">消息文字</div>
  </div>
  ...
</div>

  .params-container {
    display: table;
    border: 1px solid #ddd;
    .param-item {
      display: table-row;
    }
    .param-cell {
      display: table-cell;
      padding: 10px;
    }
    .font-bold {
      font-weight: bold;
    }
  }

6. 多行文本居右对齐

  text-align: justify;
  text-align-last: right;

7. filter 一些用法

/* 获取指向 SVG 滤镜的 URI，该SVG filter可以嵌入到外部 XML 文件中。 */
filter: url("filters.svg#filter-id");

/* blur() 函数将高斯模糊应用于输入图像。 */
filter: blur(5px);

/* brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。 */
filter: brightness(0.4);

/* contrast() 函数可调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。 */
filter: contrast(200%);

/* drop-shadow() 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。 */
filter: drop-shadow(16px 16px 20px blue);

/* grayscale() 函数将改变输入图像灰度。 */
filter: grayscale(50%);

/* hue-rotate() 函数在输入图像上应用色相旋转。 */
filter: hue-rotate(90deg);

/* invert() 函数反转输入图像。 */
filter: invert(75%);

/* 透明度 */
filter: opacity(25%);

/* saturate() 函数转换图像饱和度。 */
filter: saturate(30%);

/* sepia() 函数将图像转换为深褐色。 */
filter: sepia(60%);