CSS： 10 篇

按照小伙伴们的请求，我用 CSS 写了一个新的 CSS Logo。

一开始，我想从它的官方库里找找，看看有没有直接用 CSS 写好的源码，发现没有，就找了最容易查看细节的 SVG 的文件。

把它导入 figma 之后，发现啥用也没有，我以为能直接看背景矩形的圆角，发现无论是这个背景还是 CSS 文字都是路径，没办法直接测量圆角。

然后我又想看一下 CSS 与边框的距离，发现这些数字也不是挺精确...大概 34px 吧，不知道是不是软件的问题，算啦，就简单粗略的还原一下吧。圆角的问题，这里我直接覆盖一个新的矩形，调一下透明度，然后调整圆角，直到和 logo 的圆角看起来一致就好了，大概 68px，这里注意一下，CSS 最后一个 S 的弧度和这个圆角似乎也保持了一致。再看宽度和高度是 440px。背景紫色是 #663399，这个官方仓库也写明了。

随着现代网页设计的发展，CSS 动画已逐渐成为构建用户体验良好、互动性强的网站的关键。相比于静态的页面布局，动画能为用户带来更丰富的视觉体验，也能帮助网页更好地传达信息。

那么，为什么要用 CSS 动画呢？简单来说，CSS 动画可以通过视觉效果引导用户注意页面上的重要内容，例如按钮、链接、图标等，使用户的交互体验更加直观、自然。通过适当的动画设计，页面可以显得更具活力和吸引力，提高用户的留存率与参与度。

CSS 动画在网页中的应用也变得越来越重要。无论是加载动画、鼠标悬停效果，还是页面滚动时的动态内容展示，CSS 动画都能够轻松实现。再由于 CSS 动画轻量和高效的特性，我们可以在不影响页面性能的前提下，增强网站的互动性与用户体验。

这篇文章将详细介绍 CSS 动画的基础知识、关键技巧和常见应用，帮助初学者全面掌握 CSS 动画的使用方法，使大家能够轻松地为网页添加动态效果，提升网页开发和设计的专业性以及吸引力。

什么是CSS动画？​

CSS 动画是通过定义一系列关键帧或过渡效果，使网页中的元素在指定时间内发生变化的一种技术。它能让网页元素平滑地改变属性，例如位置、大小、颜色、透明度等。

在现代网页设计中，CSS 动画有多种用途，常见的包括：

• 加载动画：帮助用户了解页面正在加载，可以缓解因为等待而带来的焦虑感。
• 交互效果：如按钮悬停、点击效果等，当用户与页面交互时，动画可以反馈出响应状态，提升用户的互动体验。
• 滚动效果：在页面滚动时展示的动画内容，使得页面不再是静态的、单一的文本和图片，增加了视觉层次感。

在前端开发过程中，利用 CSS 一行代码技巧可以解决一些常见问题，提高编码效率，使样式设置更加简洁。本文将分享 10 个 CSS 一行代码技巧。

1. 居中对齐​

居中对齐是 CSS 中的常见需求。通过一行 CSS 代码，可以实现元素的水平垂直居中。

display: grid; place-items: center;

我们在前端开发中，经常会有居中某个元素的需求。因为 CSS 对于居中的方式有多种多样，在不同场景下有不同的效果，需要特别记住它们的应用场景才能够正常的居中元素。那么这篇文章，我们就看一下在 CSS 中，水平居中一个元素的不同方法和技巧，帮助你在前端开发中更加游刃有余。

使用 text-align 居中行内元素​

text-align 不仅可以居中文本，还可以居中行内元素（如文本或图片）。把父元素的 'text-align' 设置为 center，然后把子元素的 display 属性设置为 inline 就可以了。

.parent-element {
  text-align: center;
}

在编写技术文档的时候，我们经常会给用户展示一些常用的快捷键，那么在 HTML 中，我们可以使用原生的 <kbd> 标签来表示一个按键，它也是 HTML 语义化的标签之一，相比于使用 <div> 等通用的、无意义的标签，使用语义化的 <kbd> 可以直接知道这是代表按键的元素。

如何使用 kbd​

<kbd> 是一个行内元素，跟 span 类似，每个按键都放到一个单独的 <kbd> 标签即可，例如下方示例：

使用 CSS 隐藏滚动条，如果直接使用 overflow: hidden 会导致内容不能滚动，要想使用 css 隐藏滚动条，但不影响内容滚动，这里有两种方法：

• 使用 padding 把滚动条移出浏览器视口。
• 使用 ::webkit-scrollbar 伪元素选择器（简单，但兼容性不好）。

下面分别来看一下这两种方法。

在使用 CSS 编写页面样式的时候，你是不是写过类似的代码：

li a,
artcile a,
section a {
  color: #000000;
}
h1 a,
h2 a,
h3 a {
  color: blue;
}

为了给一篇文章中，不同位置的超链接设置不同的颜色，需要在多个选择器中，重复的选择 a  元素，如果是其它名字比较长的元素或者 class，那么写起来会特别麻烦，稍加不注意就会写错。

在编写网站的时候，或多或少都会用到一些网络上的字体，CSS 3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过改变 CSS 中的 font-display 属性，就可以避免这个问题。

作为一名前端工程师，经常在写完 HTML 以后，才觉得真正的噩梦要开始了，啊，写 CSS 的时候，面对满屏乱飞的组件，真想手动给他们挪到该在位置上…… 都说 CSS 很难掌握，最愁给页面编写样式，其实都是因为还没有形成一个对 CSS 宏观的了解，只要有了正确的学习方法、设计思维，再通过不断的积累，就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧整理一下，让你在以后编写 CSS 的时候不再发愁。

在写 CSS 的时候你一定遇到过有些样式明明写对了，也选择了正确的 html 元素去应用这些样式，可是就是不生效，这是为什么呢？因为在选择同一个 HTML 元素的时候，不同的选择器有不同的优先级，优先级低的选择器的样式会被优先级高的覆盖。