一些神奇但是很有用的css属性

一些神奇但是很有用的css属性

• linear-gradient：线性渐变background:linear-gradient(pink, #9198e5)

• 自定义属性：在css中使用变量

  <!-- 定义自定义属性 -->
  :root {
        
        
      --theme-color: red;
  }
  
  <!-- 使用变量 -->
  h1 {
        
        
      color: var(--theme-color);
  }
  

• 解决1px问题

  .scale-1px-bottom {
        
        
      position: relative;
      border:none;
  }
  .scale-1px-bottom::after {
        
        
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      background: #000;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
  }
  
  .scale-1px {
        
        
      position: relative;
      margin-bottom: 20px;
      border:none;
  }
  .scale-1px::after {
        
        
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #000;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
  }
  

• 长文本处理

  字符超出部分换行：overflow-wrap:break-word

  字符超出位置使用连字符：hyphens:auto

  单行文本省略：white-space:nowrap;overflow:hidden;text-overflow:ellipsis

  多行文本超出省略：overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical

在 Chrome DevTools 中可以按住 shift + 鼠标左键可以切换颜色的表示方式