原文作者：Mehdi Aoussiad
翻译：尴尬风流
原文链接：6 Useful Pure CSS Tips that You Should Know
个人翻译，转载请注明出处，文章中有什么问题欢迎大家在评论中指出
CSS是一种很棒的样式表语言，我们可以使用它来改变网站样式，或是制作响应式的网站。它是所有Web开发人员必须掌握的技能，因为每个网站或Web应用程序都会使用CSS。
如今的CSS语言已经有了许多改进。你可以在不使用JavaScript的情况下用纯CSS创建一些很酷的东西。这就是为什么你需要了解一些CSS技巧，他们能让你在项目中制作出非常惊艳的UI。
在这篇文章中，我们将会展示一些实用的CSS技巧，你可以在接下来的项目中尝试使用他们。那么让我们直接开始吧。
1. 给滚动条增加样式
使用CSS，你可以轻松地在你的网站上修改滚动条的样式。这样你可以实现自己想要的任何效果。
要实现这一点，你需要使用属性 ::scrollbar 和 ::scrollbar-thumb，下面是一段代码示例。
body{
height: 200vh;
}
::-webkit-scrollbar{
width: 17px;
}
::-webkit-scrollbar-thumb{
background: black;
}通过代码你可以看到，我们添加了-webkit-前缀，因为这是Chrome和Safari浏览器的内核webkit支持的CSS扩展。我们还添加了我们的样式，使滚动条的宽度变大，并变成黑色。
你可以点击这个链接查看效果
2. 给鼠标选中文本增加样式
我们在浏览网站或阅读博客时，经常会用鼠标选择某段文字。你可以通过CSS来改变被鼠标选中文本的样式。
::selection 属性可以让你轻松改变被鼠标选中文本的样式。
下面是代码示例：
::selection{
background: yellow;
color: black;
}添加上述样式表后，用鼠标选择文字时，文字的背景会变成黄色，文字颜色会变成黑色。
你可以点击这个链接查看效果
3. 实现平滑的滚动
你可以在 html 选择器中添加CSS属性 scroll-behavior，这样整个HTML页面就会有平滑的滚动。
下面是代码示例：
html{
scroll-behavior: smooth;
}你可以点击这个链接查看效果
4. 纯CSS实现深色模式
你知道吗？不必使用JavaScript就可以轻松地为你的网站添加深色模式吗？我发现一些开发人员使用CSS变量来实现黑暗模式。但还有另一个很酷的技巧，可以让你在不使用CSS变量的情况下实现同样的效果。
我们将在一个类型为复选框的输入元素上使用伪元素::checked，以便在复选框被点击时轻松地在深色模式和浅色模式之间切换。
请看下面这段简单的HTML和CSS代码。
HTML代码：
<body>
<input type="checkbox" id="checkbox">
<div class="container">
<h1>Hello World!</h1>
<div class="div1">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, pariatur?</p>
</div>
</div>
</body>CSS代码：
body{
height: 100vh;
}
.container{
width: 100%;
height: 100%;
padding: 80px 20px;
transition: .4s ease;
}
/* When the checkbox is clicked */
#checkbox:checked + .container{
background: black;
color: white;
}你可以点击这个链接查看效果
If you want to know more details about dark mode using ::checkbox , check out my article below:
如果你想知道更多关于使用 ::checkbox 实现深色模式的细节，请看这篇文章。
5. 改变输入框中光标的颜色
你也可以使用CSS来改变输入框中光标的颜色。使用 caret-color 这个属性就可以实现。
下面是代码示例：
input{
caret-color: red;
}你可以点击这个链接查看效果
6. 圆锥渐变
CSS的另一个很酷的地方是你可以创建漂亮的饼图。你可以使用CSS的 conic-gradient 属性。
下面是一段代码示例：
div{
width: 300px;
height: 300px;
border-radius: 50%;
background: conic-gradient(red 0% 20%, blue 20% 60%, black 60% 100%);
}你可以点击这个链接查看效果
结论
你可以发现，你可以用纯CSS做很多很酷的事情，而不必使用任何框架或库。这就是对于前端开发者来说，为什么CSS非常的重要。
感谢你阅读我的文章，希望我能帮到你。
我建立了一个技术交流群，每天会在群里发技术名词相关的英语小卡片，大家可以加微信「xiedaimala03」备注「程序员英语」进群，交流技术的同时也顺便学点英语，何乐而不为呢！
也欢迎大家关注公众号「前端见外」获取每日英语小卡片。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。