CSS 技巧和窍门 #01

过去几个月，我们在 Skynox Tech 的 Twitter 账号上分享了一系列名为 #CSStricks 的推文。我们分享了许多在线教程中找不到的技巧。今天，我们决定将这些技巧汇总到一起，方便您在一个地方找到它们。这些推文不仅能提升您的 CSS 水平，还能帮您节省大量代码，并为您的项目增添个人特色。

以下是 CSS 的技巧和窍门：-

1. 平滑滚动

当你访问某些网站并尝试切换不同的版块时，它会平滑地滚动到相应的版块。这不需要什么高级代码，只需在 CSS 中写一行代码就能实现。

2. 使用纯 CSS 截断文本

有时卡片中的文本不一致，看起来会很混乱。使用此技巧，只需使用 CSS 即可限制卡片上的文本。

3. 输入插入符号颜色

想为您的网站增添一些个性化色彩吗？不妨使用这个 CSS 技巧，更改输入框插入符号的颜色，让它变成您喜欢的自定义颜色。

4.阴影和盒子阴影

你知道透明图像可以使用“阴影”功能吗？
它能提供更好的阴影效果。

5. 首字下沉

你可能见过一些博客，首字母很大，文字环绕在首字母周围。只需在文本块上使用这个简单的技巧，就能实现这一点。

6. Div 居中

让 div 元素居中有时可能令人望而生畏，但有了这项技巧，一切就迎刃而解了。只需几行 CSS，即可让任何 div 居中。

7. 没有价值，就没有问题

当元素没有文本值但 href 属性包含链接时，显示链接。是不是很酷？

8. 继承框大小

让“box-sizing”继承自 HTML。这样可以更轻松地更改“插件中的 box-sizing”或其他利用其他行为的组件。

额外提示：-

** 奖励 1：更好的用户体验 **

随着现代网络技术的不断增强，用户体验成为关注的重点之一。即使你的网站设计精良，但用户体验不佳，你也无法留住他们。这是一个很酷的用户体验技巧，可以将自动播放的视频静音，让用户自行决定是否要听。

** 奖励 2：选择伪类 **

大多数情况下，当你访问任何网站并尝试复制一些文本时，它只是蓝色选择框搭配白色文本。使用选择伪类可以为网站上的文本选择添加个性化元素。这将赋予它们个性化的风格，并使您的网站脱颖而出！

好了，各位！
以上就是我目前要分享的所有技巧。如果您想了解更多类似的内容，以及 React、ES6 等其他 Web 技术的技巧和窍门，请在 Twitter 上关注我们@XenoxDev。我们分享了很多学习 Web 开发的精彩内容和资源，所以请务必关注我们。

到那时为止👋👋