CSS

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天 介绍 CSS 中的层叠、优先级和继承决定着如何将 CSS 应用到 HTML 中，以及如何解决冲突。在某些时候，我们在做一个项目过程中会发现一些

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。用代码制作一张名片最直观地介绍给别人的方式就是通过使用 HTML 绘制一个网页来显示了，下面我们就来制作一个翻转动效的

光标悬停在圆形框内或通过键盘 Tab 键导航来聚焦到圆形框元素时，小兔子将张大嘴巴，同时底部升起三只不同颜色的气球，上面的祝福语也会开启颜色动画，这个动效意味着掘友们能在新年大展宏图、步步高升。

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛 介绍 宠物科普：小兔是有各种颜色的，它们的眼睛也是有不一样颜色的。那是因为它们身体里有一种叫色素的东西。兔子眼睛的颜色与它们的皮

CSS 动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。创建动画序列，需要使用 animation 属性或其子属性，动画的实际表现是由 @keyframes 规则实

HTML 中表单控件的效果都是通过浏览器的 Shadow Dom 创建的，脱离文档主树，不受大环境 CSS 影响，要控制其 UI 只能使用浏览器开发的伪元素 API 接口。并且，只有部分的样式可以重置

`<select>` 元素的内部结构复杂，难以控制，所以很难用 CSS 进行高效的设计，可以使用非语义元素和 JavaScript 来制作下拉菜单，再使用 WAI-ARIA 来提供语义。

Chrome 89 开始支持，目前除了 IE，其他各浏览器都已支持，匹配 `<input type="file">` 元素上的按钮，兼容写法为 ::-webkit-file-upload-button

CSS clip-path 属性除了剪裁圆、多边形之外，还支持 url() 函数语法，即可以把 SVG 元素中的路径作为剪裁路径。SVG 提供了 clipPathUnits 属性指示用于 `<clip

为什么B站的弹幕可以不挡人物 这篇文章里面介绍了这个神奇的 mask 属性，我们知道了B站的弹幕可以不挡人物的原理： 视频处理：每一帧画面都由后台 AI 识别后生成对应的 base64 图片，一张图

SVG SMIL animation 可以很容易实现元素沿着不规则的路径运动动画，但由于其依赖 SVG 元素和 HTML 属性，容易造成复用时的冗余，不利于维护。新 CSS 属性 offset-pat

一般实现是文字搜索高亮，需要动态给文字内容套一层标签，然后才能改变匹配文字的颜色。现在，通过 mix-blend-mode 混合模式，我们可以在不嵌套任何标签的情况下，让任意的文字颜色变色。

CSS filter 属性可以通过一个 URL 链接到 SVG 的 filter 滤镜元素的方式来引用一个 SVG 滤镜。效果：点击分享按钮，弹出常见的社交分享按钮，然后相互间粘滞，同时分享按钮还会抖

--s CSS 变量表示相册的图片数量（不包括最后一个补上的）。 :hover 伪类控制鼠标悬浮时，停止滚动。reverse 表示反向运行动画，每周期结束动画由尾到头运行。改成 normal，相册将从

与 2020 年和 2021 年一样，网络上最受欢迎的类名是 active，Font Awesome 的 fa，fa-* 前缀仍然排在第二和第三。

字体一般可以通过使用字体文件来实现彩色效果，但是通过 CSS 方式也是可以实现的，下面是两种实现方法。推荐第二种方法，效果更好，样式也不容易被一些页面插件影响。

无论是内联元素，还是原本就是块级元素，在应用 display:flow-root 声明后，都会变成块级元素，同时这个元素将创建一个新的 BFC，而不会产生任何其他潜在的问题副作用。

Grid 布局实现的元素层叠不改变容器元素的层叠上下文关系和元素的包含块关系。 方便地控制元素的位置，通过设置 align-self:stretch 可以实现半透明覆盖效果。

媒体查询可以根据视口的大小来更改文档布局，然而很多组件并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。 容器查询可以在不改变浏览器视口宽度的前提下，根据容器中的空间大小进行布局调整。

@property 规则提供了一个直接在样式表中注册自定义属性的方式，跟 CSS.registerProperty 函数使用同样的参数调用效果相同。并可以对属性类型检查、设定默认值及定义是否可以被继承