根据不同的配色方案，在前端实现动态切换系统主题颜色。 大概的思路就是给 html 根标签设置一个 data-theme 属性，然后通过 js 切换 data-theme 的属性值， 创建项目 npm install -g @vue/cli vue create vue-theme 安装 Sass 依赖 npm install ...

以双短划线开头来声明一个CSS变量： element { --main-bg-color: brown; } 使用 var()函数来取值： element { background-color: var(--main-bg-color); } css 变量通常是定义在 :root 伪类上 > :root选择器用匹配文档的根元素。 > ...

全屏API可以控制浏览器的全屏显示，让一个 Element 节点（以及子节点）占满用户的整个屏幕 这还是一种实验中的功能，使用时需了解各种浏览器的兼容情况。 :fullscreen 伪类 在全屏模式下，全屏的元素会有:fullscreen 伪类，使用这个伪类，可以对全屏状态设置单独的CSS属性。 :-webkit-full-screen { // Chro ...

html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data ...

CSS 网格布局（又名“网格”）是一个二维的基于网格的布局系统，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 浏览器支持的详细数据可在Caniuse查看。 在了解网格 ...