51工具盒子
tailwindcss 设置css变量，实现主题配色样式切换
### 前言 {#前言} `tailwindcss`是有一个什么[Dark Mode](https://tailwindcss.com/docs/dark-mode) 的，但是我觉得这个，不够用，也不好用。翻了网上的一些方法，发现还是css变量的方式更加好用，在这里做个记录。 ### 思路 {#思路} 首先，我们按照正常的思路来，想要实现网页的主题切换。我们只需要准备几套...
CSS3
CSS学习笔记
CSS(Cascading Style Sheet)层叠级联样式表 {#csscascading-style-sheet层叠级联样式表} ==================================================================== CSS3 概述 {#css3-概述} ------------------ * CSS3 在 CSS...
css笔记
基本属性 {#基本属性} ------------ 1. color - 设置元素的前景色，通常是指文本颜色。 2. background-color - 设置元素的背景颜色。 3. font-family - 设置文本的字体系列。 4. font-size - 设置文本的字体大小。 5. font-weight - 设置文本的粗细，如normal、bold。 6. text...
3分钟带你理解CSS中的BFC(块级可视化上下文)
> 文章已同步至掘金：<https://juejin.cn/post/6844903965558046727> > 欢迎访问😃，有任何问题都可留言评论哦\~ 常见布局 {#%E5%B8%B8%E8%A7%81%E5%B8%83%E5%B1%80} ============================================ 在讲 B...
Chrome 发布新的 CSS 视口单位：svh、lvh、dvh！！！
[引用站外地址 原文链接 The large， small， and dynamic viewport units](https://web.dev/viewport-units/) [引用站外地址 原文翻译 Chrome 发布新的 CSS 视口单位：svh、lvh、dvh！！！](https://mp.weixin.qq.com/s/sbdXOo1GUBOxQw_HC7a...
css模糊羽化
在逛 codepen 的时候发现一个有意思的 css 羽化项目 [引用站外地址 css羽化 css 羽化](https://codepen.io/xboxyan/pen/ZERZrQw) 原理是使用了 svg 中的 `foreignObject` 将 dom 转化为图片来创建一个边缘模糊的遮罩 让原本有`backdrop-filter: blur(10px);`的元素产...
CSS 浮动(Float) 清除浮动
> 文章已同步至掘金：<https://juejin.cn/post/6844903891155288072> > 欢迎访问😃，有任何问题都可留言评论哦\~ 说浮动之前，先说一些别的东西 {#%E8%AF%B4%E6%B5%AE%E5%8A%A8%E4%B9%8B%E5%89%8D%EF%BC%8C%E5%85%88%E8%AF%B4%E4%B8...
CSS盒子模型
> 文章已同步至掘金：<https://juejin.cn/post/6844903890932989959> > 欢迎访问😃，有任何问题都可留言评论哦\~ 盒子模型(Box Model) {#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B(box-model)} ----------------------------...
Flex布局(CSS)
> 文章已同步至掘金：<https://juejin.cn/post/6844903846511116296> > 欢迎访问😃，有任何问题都可留言评论哦\~ Flex（Flexible Box）布局 称为 "弹性布局"，可以为网页的布局提供最大的灵活性，取代了往常的 浮动（float） 布局，并且任何一个容器都可以设置 Fle...
CSS选择器
> 文章已同步至掘金：<https://juejin.cn/post/6844903890702303246> > 欢迎访问😃，有任何问题都可留言评论哦\~ ### ID选择器 {#id%E9%80%89%E6%8B%A9%E5%99%A8} **用法：** * id 选择器以 "#" 来定义。 * 标签需要使用 id=&...
