【前端见外】6个你应该知道的实用CSS小技巧

时间 2021-04-04

标签 javascript css html 前端 java 程序员 web 浏览器微信框架栏目 CSS 繁體版

原文原文链接

原文做者：Mehdi Aoussiadjavascript

翻译：尴尬风流css

原文连接：6 Useful Pure CSS Tips that You Should Knowhtml

我的翻译，转载请注明出处，文章中有什么问题欢迎你们在评论中指出前端

CSS是一种很棒的样式表语言，咱们能够使用它来改变网站样式，或是制做响应式的网站。它是全部Web开发人员必须掌握的技能，由于每一个网站或Web应用程序都会使用CSS。java

现在的CSS语言已经有了许多改进。你能够在不使用JavaScript的状况下用纯CSS建立一些很酷的东西。这就是为何你须要了解一些CSS技巧，他们能让你在项目中制做出很是惊艳的UI。程序员

在这篇文章中，咱们将会展现一些实用的CSS技巧，你能够在接下来的项目中尝试使用他们。那么让咱们直接开始吧。web

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」备注「程序员英语」进群，交流技术的同时也顺便学点英语，何乐而不为呢！

也欢迎你们关注公众号「前端见外」获取每日英语小卡片。