css特性

1.position

• static : 指定元素使用正常的布局行为,top, right, bottom, left 和 z-index 属性无效。
• relative : 元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置,position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
• absolute : 元素会被移出正常文档流,通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
• fixed : 元素会被移出正常文档流,通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
• sticky : 元素根据正常文档流进行定位,然后相对它的最近滚动祖先和最近块级祖先，包括 table-related 元素,基于top, right, bottom, 和 left的值进行偏移。注意:一个 sticky 元素会固定在离它最近的一个拥有滚动机制的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。

2.gradient

• linear-gradient : 线形渐变 语法:
  linear-gradient([ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)
  参数:
  <angle> : 用角度值指定渐变的方向（或角度）。角度顺时针增加。[deg(度),grad(百分度),rad(弧度),turn(圈数)]
  <color-stop>\ : 由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）
• radial-gradient : 径向渐变
  语法:
  radial-gradient([ [ circle | ellipse ] || <extent-keyword> ] [at <position>]? , | at <position>, ]?<color-stop> [ , <color-stop> ]+)
  参数:
  <extent-keyword> : closest-side(渐变的边缘形状与容器距离渐变中心点最近的一边相切),closest-corner(渐变的边缘形状与容器距离渐变中心点最近的一个角相交),farthest-side(边缘形状与容器距离渐变中心点最远的一边相切),farthest-corner(渐变的边缘形状与容器距离渐变中心点最远的一个角相交)
  <color-stop> : 表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）
• conic-gradient : 锥形渐变 语法：

/* A conic gradient rotated 45 degrees,
   starting blue and finishing red */
conic-gradient(from 45deg, blue, red);

/* A bluish purple box: the gradient goes from blue to red,
   but only the bottom right quadrant is visible, as the
   center of the conic gradient is at the top left corner */
conic-gradient(from 90deg at 0 0, blue, red);

/* Color wheel */
background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
);

/* Customizing gradients */
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

• repeating-linear-gradient
• repeating-radial-gradient
• repeating-conic-gradient

3.backdrop-filter

可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)，因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

4.drop-shadow()

投影实际上是输入图像的 alpha 蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。

drop-shadow(offset-x offset-y blur-radius spread-radius color)

5.:nth-child(an+b)

对子元素从1开始排序，选择满足(an+b)的集合，最后再选择满足条件的元素。

6.:nth-of-type(an+b)

对子元素从1开始排序，先再选择满足条件的元素，再选择满足(an+b)的集合。