5 个适合初学者的 CSS 技巧

1. CSS变量

2. 剪切路径

3. 文本省略

4. 自定义光标

5. 自动调整背景图像大小

结论

感谢阅读

学习CSS是一门终身的旅程。每天都会有新的功能出现。话虽如此，我发现很多功能很少使用，尽管它们非常有用。本文简要介绍了 5 个很棒的CSS技巧，它们可以提升你的技能或简化你的工作流程。

1. CSS变量

变量可以极大地帮助你保持代码的DRY（不要重复自己）。你不需要SCSS来利用样式表中变量的强大功能，原生CSS也支持它。在CSS中创建变量的语法如下：

:root {
    --variable-name: value;
}

该值可以存储任何内容，例如：10px，，，，等，并且可以与任何CSS选择器一起使用，但约定俗成地在 中声明变量。20rem#ffffffbox-shadow: 0px 0px 0px 0px rgb(0,0,0):root

您可以将变量与任何参数一起使用，例如padding，，，等：colorbackground

.selector {
    <param>: var(--variable-name);
}

变量可以用来轻松创建令人惊叹的效果，例如下面给出的暗模式。

2. 剪切路径

clip path属性让你在网站上轻松创建一些炫酷的形状。下面给出了一个简单的使用示例。clip path

CSSclip-path中的语法是：

.selector {
    clip-path: <path>;
}

您可以clip paths使用Clippy生成简单的形状，或者开发自定义clip paths的高级形状，例如：

注：这支笔是由Jon Kantner开发的

3. 文本省略

很多时候，你会想要处理网站中溢出文本的显示方式，text-overflow这时可以使用属性。强制文本溢出有一个先决条件，因为text-overflow它只处理溢出文本的显示方式。

/* Pre-requisite */
overflow: hidden;
white-space: nowrap;

添加时text-overflow: ellipsis;溢出的文本被剪掉，并且文本末尾出现“...”

4. 自定义光标

CSS已经自带了大量可供使用的光标cursor: <cursor name>。大多数人不知道的是，你可以使用以下方法从图像中制作自己的光标：

cursor: url("<link to image>"), auto;

注意：光标在移动设备上不可见。

注：这支笔是由Geoff Graham开发的

5. 自动调整背景图像大小

作为一名初学者，我曾经在处理背景图片方面遇到过很多困难。有一个简单的方法可以让CSS处理背景图片的大小调整。

background-size: cover;

结论

在本文中，你学到了一些高级技巧，可以在朋友面前炫耀，并将你的技能提升到一个新的水平。继续学习和练习，你一定会成为一名优秀的开发人员 ;)

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。