我的十个常用 CSS 一行代码技巧

在网页设计和开发中，CSS 是不可或缺的一部分。熟练掌握一些简洁高效的一行代码技巧，能够大大提高我们的工作效率和页面效果。以下是我经常使用的十个 CSS 一行代码技巧。

1. 清除默认的内外边距 * { margin: 0; padding: 0; } 这行代码可以快速清除页面中所有元素默认的内外边距，确保页面布局的一致性。

2. 隐藏滚动条 ::-webkit-scrollbar { display: none; } 当我们希望页面的滚动条不显示，以保持页面的简洁美观时，这行代码就派上用场了。

3. 实现文本自动换行 word-wrap: break-word; 对于较长的文本内容，使用这行代码可以避免出现文本溢出的情况。

4. 使图片自适应容器 img { max-width: 100%; height: auto; } 确保图片在不同尺寸的容器中都能完美显示，不会出现变形或超出容器的问题。

5. 平滑滚动 html { scroll-behavior: smooth; } 为页面添加平滑滚动效果，提升用户体验。

6. 鼠标指针样式 cursor: pointer; 当元素需要表示可点击时，将鼠标指针样式设置为手型，增强交互性。

7. 文字阴影 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 为文字添加阴影效果，使其更加突出和立体。

8. 背景渐变 background: linear-gradient(to bottom, #f44336, #e91e63); 轻松创建漂亮的背景渐变效果，增加页面的视觉吸引力。

9. 元素居中 div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 通过这行代码可以将元素在页面中水平和垂直居中。

10. 禁止文本选中 user-select: none; 在某些情况下，不希望用户选中页面中的文本，使用这行代码即可实现。

掌握这些 CSS 一行代码技巧，能够让我们在网页开发中更加得心应手，快速实现各种常见的效果和布局需求。不断探索和实践，我们还能发现更多精彩的 CSS 技巧，为网页设计带来更多的可能性。