Pixels to Rem#
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
20250307更新
.button {
padding: .3em; // 这里采用 em，即随着 font-size 值变化而保持等比缩放、无需手动调整
font-size: 1rem;
}
为什么用 rem/em 替换 pixel#
pixel写法在改变浏览器字体大小的时候，不会变化
clip-path#
剪裁[1]搭配上过渡动画👍
LOGO：绘制SVG，path（/*svg-path*/），搭配动效🤩perspective#
实现星战字幕效果aspect-ratio#
固定长宽比CSS Filters(Blur, Gray Scale etc.)#
图像处理👍
避免剧透，实现文字模糊，实现点击查看🤩input {
caret-color: red; // 光标
}
input::placeholder {
// ...
}
CSS :is, :where, :not
div :is(h1, h3, h5) {
// ...
}
Video Captions(Subtitles)
<video src="path/to/video.mp4" controls>
<track type="captions" label="En" src="/captions.vtt"/>
</video>
video {
}
css doodle#
采用 css 的写法书写 svg[2]