CSS小技巧

• 文字渐变

  css中所有的渐变linear-gradient()、radial-gradient()等等的数据类型都是特殊的Image类型，因此这些属性在color、background-color上无效。 那如何实现文字的渐变效果呢？只能通过backround和background-clip属性搭配实现。background-clip:text 会按文字裁剪背景。

.gradient-text {
    font-size: 50px;
    font-weight: bold;
    background: linear-gradient(to right, blue, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
  }

效果

• 粘性布局

  移动端吸顶效果以及表格的右侧栏目固定大部分用的都是粘性布局。position: sticky相对于它最近的可滚动元素进行粘性定位，它不影响正常的文档流，只有滚动到特定位置时才会被黏住。

• Grid布局

  Grid布局需借助Chorme devtool查看