CSS 特性示例（一）

-webkit-text-stroke（文字描边）

为文字添加描边效果。

调整描边宽度：

描边文字效果

.outlined-text {
  -webkit-text-stroke: 1px #3b82f6;
  color: transparent;
}

position: sticky（粘性定位）

元素在滚动时保持固定位置。

我是粘性标题

这是第 1 段文本内容

这是第 2 段文本内容

这是第 3 段文本内容

这是第 4 段文本内容

这是第 5 段文本内容

这是第 6 段文本内容

这是第 7 段文本内容

这是第 8 段文本内容

这是第 9 段文本内容

这是第 10 段文本内容

.sticky-header {
  position: sticky;
  top: 0;
}

place-items（对齐方式）

同时设置 align-items 和 justify-items。

居中

起始

末端

.center {
  place-items: center;
}
.start {
  place-items: start;
}
.end {
  place-items: end;
}

@media (hover: hover) 和 (pointer: fine)

检测设备是否支持悬停和精确指针（如鼠标）。

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: #2563eb;
  }
}

/* 触摸设备使用 active 状态 */
@media (hover: none) or (pointer: coarse) {
  .button:active {
    background-color: #2563eb;
  }
}

column-count（分栏布局）

将内容分成多列显示。

调整列数：

这是一段长文本，用来演示分栏布局效果。这是一段长文本，用来演示分栏布局效果。这是一段长文本，用来演示分栏布局效果。这是一段长文本，用来演示分栏布局效果。这是一段长文本，用来演示分栏布局效果。这是一段长文本，用来演示分栏布局效果。这是一段长文本，用来演示分栏布局效果。这是一段长文本，用来演示分栏布局效果。

.columns {
  column-count: 3;
  column-gap: 2rem;
}

:empty 选择器

选择没有子元素的元素。

有内容的div

div:empty {
  background: #f0f0f0;
  border-color: #ff4444;
  min-height: 50px;
}

:invalid 伪类

选择验证失败的表单元素。

input:invalid {
  border-color: #ef4444;
  ring-color: #ef4444;
}