7 个有用的 CSS 技巧

前言

在本文中，打算展示一些简单的 CSS 技巧，可以在下一个项目中使用它们。让我们深入了解。

1. -webkit-text-stroke

-webkit-text-stroke 是一个用于控制文本描边样式的 CSS 属性，主要用于在 Web 开发中对文本进行描边效果的设置。它是针对使用 WebKit 浏览器引擎（如 Safari 和 Chrome）的浏览器的私有属性。

创建一个酷炫的文本效果的简单方法。此属性可用于给文本分配轮廓。

-webkit-text-stroke 是 -webkit-text-stroke-width 和 -webkit-text-stroke-color 的缩写属性：

.custom-headline {
  color: transparent;
  -webkit-text-stroke: 1px #04D939;
}

注：在 Internet Explorer 中不起作用。
-webkit-text-stroke 属性是针对特定浏览器引擎的私有属性，不被所有浏览器广泛支持。因此，在使用该属性时，建议同时提供备用的非私有 CSS 属性或其他方法来实现类似的效果，以确保在各种浏览器上都能良好显示。

2. -webkit-line-clamp

-webkit-line-clamp 是一个用于在 Web 开发中控制文本行数的 CSS 属性，它可以限制文本在指定行数内显示，并在超出行数时进行裁剪。该属性是 WebKit 浏览器引擎（如 Safari 和 Chrome）的私有属性。

此技巧可用于截断超过多行的文本。还需要设置 overflow: hidden。

.custom-button {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

注：在 Internet Explorer 中不起作用。

3. fixed table head

如果想要在表格滚动时保持表头固定在页面顶部，可以使用 CSS 的固定定位（fixed positioning）来实现。

对于非常高的表格，固定的表头对于阅读表格非常有帮助。

.custom-table {
  thead tr {
    position: sticky;
    top: 0;
  }
}

请注意，position: sticky 在某些浏览器上的支持可能有所不同。如果您希望确保在各种浏览器上都能正常工作，可以考虑使用 JavaScript 或其他库来实现固定表头的效果。

4. place-items

place-items 是一个 CSS 属性，用于在网格布局（Grid Layout）中同时设置项目在网格轨道上的对齐方式。它可以应用于容器元素（display: grid）以及网格项元素（网格的子元素）。

place-items 是一个 CSS 属性，用于在网格布局（Grid Layout）中同时设置项目在网格轨道上的对齐方式。它可以应用于容器元素（display: grid）以及网格项元素（网格的子元素）。

该属性可以接受两个值，分别表示水平对齐和垂直对齐。以下是可能的取值：

• start：将项目对齐到轨道的起始位置。
• end：将项目对齐到轨道的结束位置。
• center：将项目在轨道上居中对齐。
• stretch：将项目拉伸以填满整个轨道。

这是用于网格和弹性盒子的 align-items 和 justify-items 的缩写属性。

.custom-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center center;
}

请注意，place-items 属性也可以使用单个值，这样会将水平和垂直对齐值设置为相同的值。例如，place-items: center; 将项目在网格中同时水平和垂直居中对齐。

5. :placeholder-shown

:placeholder-shown 是一个 CSS 伪类选择器，用于选择当前表单元素中的占位符文本（placeholder）显示的状态。该伪类选择器仅在占位符文本可见时生效。

如果需要突出显示尚未填写的 <input> 或 <textarea> 元素，则可以使用 :placeholder-shown。

input:placeholder-shown {
  border-bottom: 2px solid #04D939;
}

请注意，:placeholder-shown 伪类选择器的兼容性取决于浏览器的支持情况。在某些较旧的浏览器中，可能不支持或支持有限。建议在使用该伪类选择器时进行测试，以确保在目标浏览器中正常工作。

6. @media

@media 是一个 CSS 规则，用于在不同的媒体查询条件下应用不同的样式。它可以根据设备的特性、视口的尺寸或其他媒体相关的条件来确定要应用的样式。

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

在移动设备上可能会出现 :hover 属性的问题。悬停状态也会在点击时执行。但是，如果在 @media (hover: hover) 和 (pointer: fine) 中使用 :hover 属性，悬停状态只会在非触摸设备上显示。

以下是一个带有悬停效果的箭头动画示例：

@media (hover: hover) and (pointer: fine) {
  arrow:hover {
    cursor: pointer;
    color: #027333;
    transform: translateX(0.5rem);
  }
}

请注意，媒体查询的支持和表达方式因浏览器而异。在使用 @media 规则时，建议进行测试以确保在目标浏览器和设备上得到期望的样式效果。

7. column-count

column-count 是一个 CSS 属性，用于指定一个元素应该被分割成多少列进行布局。它适用于具有多列布局的容器元素。

要创建简单的文本列，可以使用此属性。在此示例中，有两个带有 2 列的

标签。

.wrapper {
  column-count: 2;
}

请注意，column-count 属性的效果取决于容器的宽度和内容的大小。如果容器的宽度不足以容纳指定数量的列，布局可能会自动调整为适应更少的列。可以使用其他相关属性，如 column-width 和 column-fill 来进一步控制多列布局的行为。

希望这些CSS技巧对有所帮助！