在前端开发中，经常需要通过 CSS 实现各种视觉效果。本文将介绍两个常见的技巧：滚动时改变颜色和裁剪文本。
滚动时改变颜色
有时候我们会希望当用户滚动到页面的某个位置时，改变某个元素的颜色。这可以通过 CSS 的 scroll 伪类来实现。
具体实现方法如下：
-- -------------------- ---- ------- -- ---- -- ------- - ----------------- ----- - -- ---------------- -- -------------- - ----------------- ---- -
上述代码中，.target 是目标元素的 CSS 类名，它的背景色为蓝色。当用户滚动到该元素所在的位置时，在 URL 后面添加 #target，即可触发 :target 伪类选择器。在这里，我们将其用于改变目标元素的背景色为红色。
裁剪文本
有时候我们希望在一个固定大小的区域内显示一段文本，超出部分自动隐藏。这可以通过 CSS 的 text-overflow 属性来实现。
具体实现方法如下：
/* 目标元素 */
.target {
width: 200px; /* 宽度 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 裁剪超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}上述代码中，.target 是目标元素的 CSS 类名，它的宽度为 200px，不进行换行，超出部分被隐藏并用省略号代替。
overflow z-index
在实现裁剪文本时，需要注意到 overflow 属性可能会影响 z-index 的表现。当一个元素的 overflow 属性设置为非 visible 值时，该元素将创建一个新的容器，可能覆盖其他元素。
具体来说，如果我们希望在两个有 overflow 属性的元素之间设置层叠关系，需要为它们的父级元素设置 z-index 属性，例如：
-- -------------------- ---- ------- -- --- -- ------- - --------- --------- -------- -- - -- --- -- ------ - --------- --------- -------- -- --------- ------- -
上述代码中，.parent 是父元素的 CSS 类名，.child 是子元素的 CSS 类名。父元素使用了 position: relative 和 z-index: 1，子元素使用了 position: absolute 和 z-index: 2，同时也设置了 overflow: hidden 进行文本裁剪。
总结
本文介绍了两个常见的 CSS 技巧：滚动时改变颜色和裁剪文本，以及在使用 overflow 属性时需要注意的 z-index 层叠关系问题。这些技巧能够为前端开发带来更丰富的视觉效果和更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31392