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

最新推荐文章于 2023-03-05 09:00:36 发布

weixin_46980082

最新推荐文章于 2023-03-05 09:00:36 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/weixin_46980082/article/details/115420047

版权

在这里插入图片描述

原文作者：Mehdi Aoussiad

翻译：尴尬风流

原文链接：6 Useful Pure CSS Tips that You Should Know

个人翻译，转载请注明出处，文章中有什么问题欢迎大家在评论中指出

CSS is a great stylesheet language that allows you to style web pages and make them responsive. It’s a must-know for all web developers because every website or web application uses CSS.

CSS是一种很棒的样式表语言，我们可以使用它来改变网站样式，或是制作响应式的网站。它是所有Web开发人员必须掌握的技能，因为每个网站或Web应用程序都会使用CSS。

Nowadays, CSS has improved a lot. You can create some awesome stuff with it without using JavaScript. That’s why you need to know some CSS tips that will allow you to make amazing UI in your projects.

如今的CSS语言已经有了许多改进。你可以在不使用JavaScript的情况下用纯CSS创建一些很酷的东西。这就是为什么你需要了解一些CSS技巧，他们能让你在项目中制作出非常惊艳的UI。

In this article, we will show you some useful CSS tips that you can use on your next projects. So let’s get right into it.

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

1. 给滚动条增加样式

With CSS, you can easily style the default scrollbar on your website. So you can make it look awesome as you wanted it.

使用CSS，你可以轻松地在你的网站上修改滚动条的样式。这样你可以实现自己想要的任何效果。

To achieve that, you will need to use the properties ::scrollbarand ::scrollbar-thumbas we did in the code example below:

要实现这一点，你需要使用属性 ::scrollbar 和 ::scrollbar-thumb，下面是一段代码示例。

body{
  height: 200vh;
}
::-webkit-scrollbar{
  width: 17px;
}
::-webkit-scrollbar-thumb{
  background: black;
}

As you can see, we added -webkit-for the browser support in Chrome and Safari. We also added our styles to make the scrollbar’s width bigger in black color.

通过代码你可以看到，我们添加了-webkit-前缀，因为这是Chrome和Safari浏览器的内核webkit支持的CSS扩展。我们还添加了我们的样式，使滚动条的宽度变大，并变成黑色。

你可以点击这个链接查看效果

2. 给鼠标选中文本增加样式

When we check a website or read a blog, we often select the text with our mouse. But the good thing is that you can change the selection styles in CSS.

我们在浏览网站或阅读博客时，经常会用鼠标选择某段文字。你可以通过CSS来改变被鼠标选中文本的样式。

The property ::selectionallows you to easily change the styles of the selected text.

::selection 属性可以让你轻松改变被鼠标选中文本的样式。

Here is the code example:

下面是代码示例：

::selection{
  background: yellow;
  color: black;
}

After adding the above stylesheet, the text will have a yellow background and a black color when you select it with your mouse.

添加上述样式表后，用鼠标选择文字时，文字的背景会变成黄色，文字颜色会变成黑色。

你可以点击这个链接查看效果

3. 实现平滑的滚动

You can use the CSS property scroll-behaviorusing htmlas a selector in order to enable smooth scrolling on the whole HTML page.

你可以在 html 选择器中添加CSS属性 scroll-behavior，这样整个HTML页面就会有平滑的滚动。

Here is an example:

下面是代码示例：

html{
 scroll-behavior: smooth;
}

你可以点击这个链接查看效果

4. 纯CSS实现深色模式

Do you know that you can easily add dark mode to your site without using JavaScript? I see some developers use CSS variables to create dark mode. But there is another cool tip that allows you to achieve the same thing without CSS variables.

你知道吗？不必使用JavaScript就可以轻松地为你的网站添加深色模式吗？我发现一些开发人员使用CSS变量来实现黑暗模式。但还有另一个很酷的技巧，可以让你在不使用CSS变量的情况下实现同样的效果。

So we can use the pseudo-element ::checkedon an input of type checkboxto easily toggle between dark and light mode whenever the checkbox is clicked.

我们将在一个类型为复选框的输入元素上使用伪元素::checked，以便在复选框被点击时轻松地在深色模式和浅色模式之间切换。

Have a look at a simple HTML and CSS code below:

请看下面这段简单的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. 改变输入框中光标的颜色

You can also change the caret color on text inputs using CSS. The property caret-colorallows you to do that.

你也可以使用CSS来改变输入框中光标的颜色。使用 caret-color 这个属性就可以实现。

Here is an example:

下面是代码示例：

input{
  caret-color: red;
}

你可以点击这个链接查看效果

6. 圆锥渐变

Another cool thing about CSS is that you can create beautiful pie charts. The CSS function ionic-gradient allows you to do that.

CSS的另一个很酷的地方是你可以创建漂亮的饼图。你可以使用CSS的 conic-gradient 属性。

下面是一段代码示例：

div{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(red 0% 20%, blue 20% 60%, black 60% 100%);
}

你可以点击这个链接查看效果

结论

As you can see, there are a lot of cool things that you can do with just pure CSS without using any frameworks or libraries. That’s why CSS is very important, especially for front-end developers.

你可以发现，你可以用纯CSS做很多很酷的事情，而不必使用任何框架或库。这就是对于前端开发者来说，为什么CSS非常的重要。

Thank you for reading this article. I hope you found it useful.

感谢你阅读我的文章，希望我能帮到你。