乐趣区

关于前端:前端见外6个你应该知道的实用CSS小技巧

jiezi

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

也欢送大家关注公众号「前端见外」获取每日英语小卡片。

退出移动版