iCSS Documentation

Technical Documentation: chokcoco/iCSS

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`readme.md`)

CSS 奇技淫巧，在这里，都有。

本 Repo 围绕 CSS/Web动画 展开，谈一些有趣的话题，内容天马行空，想到什么说什么，不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节。

所有内容都在 Issues 中，同步更新到我的个人博客，觉得不错的可以点个 star 收藏支持。

按分类进行阅读

iCSS 前端趣闻

所有内容首发更新到我的公众号：

LIST

220、[浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析](https://github.com/chokcoco/iCSS/issues/275)

219、[巧用 CSS 实现高频出现的复杂怪状按钮 - 内凹平滑圆角](https://github.com/chokcoco/iCSS/issues/272)

218、[巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框](https://github.com/chokcoco/iCSS/issues/271)

217、[【动画进阶】单标签实现多行文本随滚动颜色变换](https://github.com/chokcoco/iCSS/issues/269)

216、[【现代 CSS】更强大的 :nth-child 选择器](https://github.com/chokcoco/iCSS/issues/267)

215、[全尺寸的带圆角的渐变边框](https://github.com/chokcoco/iCSS/issues/266)

214、[巧妙使用多种方式实现单侧阴影](https://github.com/chokcoco/iCSS/issues/265)

213、[渐变边框文字效果？CSS 轻松拿捏！](https://github.com/chokcoco/iCSS/issues/264)

212、[【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究](https://github.com/chokcoco/iCSS/issues/263)

211、[【动画进阶】类 ChatGpt 多行文本打字效果](https://github.com/chokcoco/iCSS/issues/262)

210、[【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width](https://github.com/chokcoco/iCSS/issues/259)

209、[【动画进阶】极具创意的鼠标交互动画](https://github.com/chokcoco/iCSS/issues/258)

208、[【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画](https://github.com/chokcoco/iCSS/issues/257)

207、[【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果](https://github.com/chokcoco/iCSS/issues/256)

206、[现代 CSS 解决方案：accent-color 强调色](https://github.com/chokcoco/iCSS/issues/255)

205、[【动画进阶】神奇的 3D 卡片反光闪烁动效](https://github.com/chokcoco/iCSS/issues/254)

204、[现代 CSS 解决方案：文字颜色自动适配背景色！](https://github.com/chokcoco/iCSS/issues/253)

203、[带圆角的虚线边框？CSS 不在话下](https://github.com/chokcoco/iCSS/issues/250)

202、[【布局技巧】Flex 布局下居中溢出滚动截断问题](https://github.com/chokcoco/iCSS/issues/249)

201、[CSS 也能实现 if 判断？实现动态高度下的不同样式展现](https://github.com/chokcoco/iCSS/issues/248)

200、[【动画进阶】单标签下多色块随机文字随机颜色动画](https://github.com/chokcoco/iCSS/issues/247)

199、[CSS 还原拉斯维加斯球数字动画](https://github.com/chokcoco/iCSS/issues/246)

198、[【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原 ](https://github.com/chokcoco/iCSS/issues/245)

197、[【动画进阶】当路径动画遇到滚动驱动！](https://github.com/chokcoco/iCSS/issues/244)

196、[现代 CSS 解决方案：原生嵌套（Nesting）](https://github.com/chokcoco/iCSS/issues/243)

195、[现代 CSS 解决方案：数学函数 Round](https://github.com/chokcoco/iCSS/issues/242)

194、[震惊！CSS 也能实现碰撞检测？](https://github.com/chokcoco/iCSS/issues/241)

193、[抢先体验！超强的 Anchor Positioning 锚点定位](https://github.com/chokcoco/iCSS/issues/239)

192、[神奇的 3D 磨砂玻璃透视效果](https://github.com/chokcoco/iCSS/issues/238)

191、[【动画进阶】有意思的 Emoji 3D 表情切换效果](https://github.com/chokcoco/iCSS/issues/237)

190、[【动画进阶】有意思的网格下落渐次加载效果](https://github.com/chokcoco/iCSS/issues/235)

189、[解放生产力！transform 支持单独赋值改变](https://github.com/chokcoco/iCSS/issues/236)

188、[单标签下的日间/黑夜模式切换按钮效果](https://github.com/chokcoco/iCSS/issues/234)

187、[现代 CSS 解决方案：CSS 原生支持的三角函数](https://github.com/chokcoco/iCSS/issues/233)

186、[有意思的气泡 Loading 效果](https://github.com/chokcoco/iCSS/issues/231)

185、[有趣的六芒星能力图动画](https://github.com/chokcoco/iCSS/issues/228)

184、[CSS 高阶小技巧 - 角向渐变的妙用！](https://github.com/chokcoco/iCSS/issues/227)

183、[巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画](https://github.com/chokcoco/iCSS/issues/226)

182、[CSS 高阶技巧 -- 不定宽文本溢出跑马灯效果完美解决方案](https://github.com/chokcoco/iCSS/issues/225)

181、[由小见大！不规则造型按钮解决方案](https://github.com/chokcoco/iCSS/issues/224)

180、[动态视口单位之 dvh、svh、lvh](https://github.com/chokcoco/iCSS/issues/223)

179、[开局一张图，构建神奇的 CSS 效果](https://github.com/chokcoco/iCSS/issues/218)

178、[巧用视觉障眼法，还原 3D 文字特效](https://github.com/chokcoco/iCSS/issues/219)

177、[不规则图形背景排版高阶技巧 -- 酷炫的六边形网格背景图](https://github.com/chokcoco/iCSS/issues/215)

176、[现代 CSS 高阶技巧，不规则边框解决方案](https://github.com/chokcoco/iCSS/issues/221)

175、[现代 CSS 高阶技巧，完美的波浪进度条效果！](https://github.com/chokcoco/iCSS/issues/220)

174、[现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！](https://github.com/chokcoco/iCSS/issues/217)

173、[现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/iCSS/issues/214)

172、[除了 filter 还有什么置灰网站的方式？](https://github.com/chokcoco/iCSS/issues/212)

171、[快速构建 3D Visualization of DOM](https://github.com/chokcoco/iCSS/issues/210)

170、[CSS at-rules(@) 规则扫盲](https://github.com/chokcoco/iCSS/issues/204)

169、[CSS 渐变锯齿消失术](https://github.com/chokcoco/iCSS/issues/209)

168、[超强的苹果官网滚动文字特效实现](https://github.com/chokcoco/iCSS/issues/208)

167、[超强的纯 CSS 鼠标点击拖拽效果](https://github.com/chokcoco/iCSS/issues/207)

166、[两道超有意思的 CSS 面试题，试试你的基础](https://github.com/chokcoco/iCSS/issues/206)

165、[单标签实现复杂的棋盘布局](https://github.com/chokcoco/iCSS/issues/203)

164、[新时代布局新特性 -- 容器查询](https://github.com/chokcoco/iCSS/issues/201)

163、[有意思的水平横向溢出滚动](https://github.com/chokcoco/iCSS/issues/200)

162、[高阶 CSS 技巧在复杂动效中的应用](https://github.com/chokcoco/iCSS/issues/202)

161、[有意思的方向裁切 overflow: clip](https://github.com/chokcoco/iCSS/issues/199)

160、[巧用 transition 实现短视频 APP 点赞动画](https://github.com/chokcoco/iCSS/issues/198)

159、[妙啊！纯 CSS 实现拼图游戏](https://github.com/chokcoco/iCSS/issues/197)

158、[多行文本下的文字渐隐消失术](https://github.com/chokcoco/iCSS/issues/196)

157、[使用 CSS 构建强大且酷炫的粒子动画](https://github.com/chokcoco/iCSS/issues/195)

156、[妙用 CSS 构建花式透视背景效果](https://github.com/chokcoco/iCSS/issues/194)

155、[圆角大杀器，使用滤镜构建圆角及波浪效果！](https://github.com/chokcoco/iCSS/issues/192)

154、[超酷炫的转场动画？CSS 轻松拿下！](https://github.com/chokcoco/iCSS/issues/191)

153、[利用噪声构建美妙的 CSS 图形](https://github.com/chokcoco/iCSS/issues/190)

152、[高阶切图技巧！基于单张图片的任意颜色转换](https://github.com/chokcoco/iCSS/issues/189)

151、[使用纯 CSS 实现超酷炫的粘性气泡效果](https://github.com/chokcoco/iCSS/issues/188)

150、[超 Nice 的表格响应式布局小技巧](https://github.com/chokcoco/iCSS/issues/187)

149、[有意思的鼠标指针交互探究](https://github.com/chokcoco/iCSS/issues/186)

148、[使用 content-visibility 优化渲染性能](https://github.com/chokcoco/iCSS/issues/185)

147、[文字轮播与图片轮播？CSS 不在话下](https://github.com/chokcoco/iCSS/issues/184)

146、[动画小技巧，通过 hover 让动画只运行一次且停留在最后一帧](https://github.com/chokcoco/iCSS/issues/182)

145、[浅谈逻辑选择器 is、where、not、has](https://github.com/chokcoco/iCSS/issues/181)

144、[现代 CSS 解决方案：CSS 数学函数](https://github.com/chokcoco/iCSS/issues/177)

143、[离谱的 CSS！从表盘刻度到艺术剪纸](https://github.com/chokcoco/iCSS/issues/180)

142、[让交互更加生动！有意思的鼠标跟随 3D 旋转动效](https://github.com/chokcoco/iCSS/issues/179)

141、[Amazing！巧用 CSS 视差实现酷炫交互动效](https://github.com/chokcoco/iCSS/issues/178)

140、[现代 CSS 解决方案：Modern CSS Reset](https://github.com/chokcoco/iCSS/issues/176)

139、[巧用 background-clip 实现超强的文字动效 ](https://github.com/chokcoco/iCSS/issues/175)

138、[一道有意思的 CSS 面试题，FizzBuzz ~](https://github.com/chokcoco/iCSS/issues/174)

137、[2022 年最受瞩目的新特性 CSS @layer 到底是个啥？](https://github.com/chokcoco/iCSS/issues/171)

136、[CSS 阴影进阶，实现更加的立体的阴影效果！](https://github.com/chokcoco/iCSS/issues/170)

135、[利用混合模式，让文字智能适配背景颜色](https://github.com/chokcoco/iCSS/issues/169)

134、[系统性学习 CSS 指南及全 DEMO 练习](https://github.com/chokcoco/iCSS/issues/168)

133、[巧用 CSS 构建渐变彩色二维码](https://github.com/chokcoco/iCSS/issues/167)

132、[来了来了，它终于来了，动画杀手锏 @scroll-timeline](https://github.com/chokcoco/iCSS/issues/166)

131、[突破限制，CSS font-variation 可变字体的魅力](https://github.com/chokcoco/iCSS/issues/164)

130、[小技巧 | 渐变消失遮罩的多种实现方式](https://github.com/chokcoco/iCSS/issues/163)

129、[巧用 CSS 实现炫彩三角边框动画](https://github.com/chokcoco/iCSS/issues/162)

128、[扫盲贴：2021 CSS 最冷门特性都是些啥？](https://github.com/chokcoco/iCSS/issues/161)

127、[疑难杂症：运用 transform 导致文本模糊的现象探究](https://github.com/chokcoco/iCSS/issues/160)

126、[LPL Ban/Pick 选人阶段的遮罩效果是如何实现的？](https://github.com/chokcoco/iCSS/issues/159)

125、[巧用 CSS 实现动态线条 Loading 动画](https://github.com/chokcoco/iCSS/issues/158)

124、[深入浅出 CSS 动画](https://github.com/chokcoco/iCSS/issues/141)

123、[妙用滤镜构建高级感拉满的磨砂玻璃渐变背景](https://github.com/chokcoco/iCSS/issues/157)

122、[深入探讨 filter 与 backdrop-filter 的异同](https://github.com/chokcoco/iCSS/issues/147)

121、[Amazing！！CSS 也能实现烟雾效果？](https://github.com/chokcoco/iCSS/issues/156)

120、[Amazing！！CSS 也能实现极光？](https://github.com/chokcoco/iCSS/issues/155)

119、[神奇的滤镜！巧妙实现内凹的平滑圆角](https://github.com/chokcoco/iCSS/issues/154)

118、[利用 clip-path 实现动态区域裁剪](https://github.com/chokcoco/iCSS/issues/153)

117、[使用 CSS 轻松实现一些高频出现的奇形怪状按钮](https://github.com/chokcoco/iCSS/issues/152)

116、[巧用渐变实现高级感拉满的背景光动画](https://github.com/chokcoco/iCSS/issues/150)

115、[巧用滤镜实现高级感拉满的文字快闪切换效果](https://github.com/chokcoco/iCSS/issues/149)

114、[3D 穿梭效果？使用 CSS 轻松搞定](https://github.com/chokcoco/iCSS/issues/148)

113、[仅仅使用 HTML/CSS 实现进度条的 N 种方式](https://github.com/chokcoco/iCSS/issues/146)

112、[CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框](https://github.com/chokcoco/iCSS/issues/145)

111、[利用 CSS Overview 面板重构优化你的网站](https://github.com/chokcoco/iCSS/issues/144)

110、[小技巧 | 一行代码实现头像与国旗的融合](https://github.com/chokcoco/iCSS/issues/143)

109、[CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果](https://github.com/chokcoco/iCSS/issues/142)

108、[CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果](https://github.com/chokcoco/iCSS/issues/140)

107、[妙用 background 实现花式文字效果](https://github.com/chokcoco/iCSS/issues/138)

106、[实现一个会动的鸿蒙 LOGO](https://github.com/chokcoco/iCSS/issues/137)

105、[巧用模糊实现文字的 3D 效果](https://github.com/chokcoco/iCSS/issues/135)

104、[奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？](https://github.com/chokcoco/iCSS/issues/132)

103、[CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能](https://github.com/chokcoco/iCSS/issues/133)

102、[CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？](https://github.com/chokcoco/iCSS/issues/130)

101、[【Web动画】科技感十足的暗黑字符雨动画](https://github.com/chokcoco/iCSS/issues/129)

100、[CSS 世界中的方位与顺序](https://github.com/chokcoco/iCSS/issues/127)

99、[巧妙的实现带圆角的三角形](https://github.com/chokcoco/iCSS/issues/126)

98、[CSS 奇思妙想 | 全兼容的毛玻璃效果](https://github.com/chokcoco/iCSS/issues/124)

97、[试试酷炫的 3D 视角](https://github.com/chokcoco/iCSS/issues/122)

96、[Web 动画原则及技巧浅析](https://github.com/chokcoco/iCSS/issues/121)

95、[CSS ::marker 让文字序号更有意思](https://github.com/chokcoco/iCSS/issues/119)

94、[Single Div 绘图技巧](https://github.com/chokcoco/iCSS/issues/120)

93、[新时代创意布局不完全指南](https://github.com/chokcoco/iCSS/issues/70)

92、[有意思的 ::maker 伪元素](https://github.com/chokcoco/iCSS/issues/119)

91、[使用 CSS prefers-* 规范，提升网站的可访问性与健壮性](https://github.com/chokcoco/iCSS/issues/118)

90、[小技巧！CSS 提取图片主题色功能探索](https://github.com/chokcoco/iCSS/issues/114)

89、[一种巧妙的使用 CSS 制作波浪效果的思路](https://github.com/chokcoco/iCSS/issues/112)

88、[探秘神奇的曲线动画 `motion-path`](https://github.com/chokcoco/iCSS/issues/113)

87、[新时代布局中一些有意思的特性](https://github.com/chokcoco/iCSS/issues/111)

86、[CSS 还能这样玩？奇思妙想渐变的艺术](https://github.com/chokcoco/iCSS/issues/110)

85、[CSS @property，让不可能变可能](https://github.com/chokcoco/iCSS/issues/109)

84、[CSS 文字装饰 text-decoration & text-emphasis](https://github.com/chokcoco/iCSS/issues/103)

83、[老生常谈之 CSS 实现三角形](https://github.com/chokcoco/iCSS/issues/108)

82、[巧用 SVG 滤镜制作有意思动效](https://github.com/chokcoco/iCSS/issues/107)

81、[有意思！不规则边框的生成方案](https://github.com/chokcoco/iCSS/issues/106)

80、[小技巧！CSS 整块文本溢出省略特性探究](https://github.com/chokcoco/iCSS/issues/102)

79、[奇思妙想 CSS 文字动画](https://github.com/chokcoco/iCSS/issues/101)

78、[巧用 `-webkit-box-reflect` 倒影实现各类动效](https://github.com/chokcoco/iCSS/issues/100)

77、[使用 mask 实现视频弹幕人物遮罩过滤](https://github.com/chokcoco/iCSS/issues/98)

76、[你可能不知道的 transition 技巧与细节](https://github.com/chokcoco/iCSS/issues/96)

75、[CSS奇思妙想 -- 使用 CSS 创造艺术图案](https://github.com/chokcoco/iCSS/issues/94)

74、[生僻标签 fieldset 与 legend 的妙用](https://github.com/chokcoco/iCSS/issues/93)

73、[CSS 奇思妙想边框动画](https://github.com/chokcoco/iCSS/issues/92)

72、[CSS 技巧一则：动态高度过渡动画](https://github.com/chokcoco/iCSS/issues/91)

71、[如何不使用 `overflow: hidden` 实现 `overflow: hidden`？](https://github.com/chokcoco/iCSS/issues/90)

70、[水平垂直居中深入挖掘](https://github.com/chokcoco/iCSS/issues/89)

69、[一行 CSS 代码的魅力](https://github.com/chokcoco/iCSS/issues/87)

68、[使用纯 CSS 实现滚动阴影效果](https://github.com/chokcoco/iCSS/issues/86)

67、[探究 position-sticky 失效问题](https://github.com/chokcoco/iCSS/issues/85)

66、[CSS 艺术 -- 使用 background 创造各种美妙的背景](https://github.com/chokcoco/iCSS/issues/84)

65、[使用 tabindex 配合 focus-within 巧妙实现父选择器](https://github.com/chokcoco/iCSS/issues/83)

64、[CSS 技巧一则 -- 不定宽溢出文本适配滚动](https://github.com/chokcoco/iCSS/issues/81)

63、[奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)

62、[使用 display: contents 增强页面语义](https://github.com/chokcoco/iCSS/issues/79)

61、[CSS 故障艺术](https://github.com/chokcoco/iCSS/issues/78)

60、[巧妙实现带圆角的渐变边框](https://github.com/chokcoco/iCSS/issues/77)

59、[深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）](https://github.com/chokcoco/iCSS/issues/76)

58、[巧用 CSS 实现酷炫的充电动画](https://github.com/chokcoco/iCSS/issues/75)

57、[使用 sroll-snap-type 优化滚动](https://github.com/chokcoco/iCSS/issues/74)

56、[在 CSS 中使用三角函数绘制曲线图形及展示动画](https://github.com/chokcoco/iCSS/issues/72)

55、[CSS 阴影动画优化技巧一则](https://github.com/chokcoco/iCSS/issues/71)

54、[Web 字体 font-family 再探秘](https://github.com/chokcoco/iCSS/issues/69)

53、[你所不知道的 CSS 负值技巧与细节](https://github.com/chokcoco/iCSS/issues/68)

52、[A Guide to CSS Rules](https://github.com/chokcoco/iCSS/issues/67)

51、[CSS 属性选择器的深入挖掘](https://github.com/chokcoco/iCSS/issues/65)

50、[探秘 flex 上下文中神奇的自动 margin](https://github.com/chokcoco/iCSS/issues/64)

49、[巧妙使用 CSS 控制动画行进](https://github.com/chokcoco/iCSS/issues/63)

48、[CSS 火焰，不在话下](https://github.com/chokcoco/iCSS/issues/62)

47、[不可思议的纯 CSS 实现鼠标跟随](https://github.com/chokcoco/iCSS/issues/46)

46、[有趣的 `box-decoration-break`](https://github.com/chokcoco/iCSS/issues/45)

45、[不可思议的纯 CSS 进度条效果](https://github.com/chokcoco/iCSS/issues/43)

44、[探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题](https://github.com/chokcoco/iCSS/issues/41)

43、[你所不知道的 CSS 阴影技巧与细节](https://github.com/chokcoco/iCSS/issues/39)

42、[滚动视差? CSS不在话下](https://github.com/chokcoco/iCSS/issues/37)

41、[神奇的选择器 `:focus-within`](https://github.com/chokcoco/iCSS/issues/36)

40、[Pure CSS Button Effect](//codepen.io/Chokcoco/pen/MGPwLg)

39、[妙用 scale 与 transfrom-origin，精准控制动画方向](https://github.com/chokcoco/iCSS/issues/34)

38、[不可思议的纯 CSS 导航栏下划线跟随效果](https://github.com/chokcoco/iCSS/issues/33)

如何使用纯 CSS 制作下述下划线跟随效果？

37、[两行 CSS 代码实现图片任意颜色赋色技术](https://github.com/chokcoco/iCSS/issues/32)

36、[`text-fill-color` 与 `color` 的异同](https://github.com/chokcoco/iCSS/issues/17)

35、[你所不知道的 CSS 滤镜技巧与细节](https://github.com/chokcoco/iCSS/issues/30)

34、[你所不知道的 CSS 动画技巧与细节](https://github.com/chokcoco/iCSS/issues/27)

33、[fixed 定位失效 || 不受控制的 `position:fixed`](https://github.com/chokcoco/iCSS/issues/24)

32、[CSS 新特性`contain`，控制页面的重绘与重排](https://github.com/chokcoco/iCSS/issues/23)

31、[纯 CSS 实现波浪效果!](https://github.com/chokcoco/iCSS/issues/22)

30、[奇妙的 CSS shapes（CSS图形）](https://github.com/chokcoco/iCSS/issues/18)

29、[不可思议的混合模式 `background-blend-mode`](https://github.com/chokcoco/iCSS/issues/31)

28、[不可思议的混合模式 `mix-blend-mode` ](https://github.com/chokcoco/iCSS/issues/16)

27、[神奇的 `conic-gradient` 角向渐变](https://github.com/chokcoco/iCSS/issues/19)

26、[奇妙的`-webkit-background-clip: text`](https://github.com/chokcoco/iCSS/issues/14)

25、[vh、vw、vmin、vmax 知多少](https://github.com/chokcoco/iCSS/issues/15)

24、[纯 CSS 实现瀑布流布局](https://github.com/chokcoco/iCSS/issues/40)

23、[谈谈 CSS 关键字 initial、inherit 和 unset](https://github.com/chokcoco/iCSS/issues/13)

22、[纯 CSS 方式实现 CSS 动画的暂停与播放](https://github.com/chokcoco/iCSS/issues/12)

21、[提高 CSS 动画性能的正确姿势 | 盒子端 CSS 动画性能提升研究](https://github.com/chokcoco/iCSS/issues/11)

20、[巧妙地制作背景色渐变动画！](https://github.com/chokcoco/iCSS/issues/10)

如何实现下述的背景色渐变动画？

19、[深入探讨 CSS 特性检测 @supports 与 Modernizr](https://github.com/chokcoco/iCSS/issues/9)

18、[使用 `position:sticky` 实现粘性布局](https://github.com/chokcoco/iCSS/issues/8)

17、[再探究字体的渲染规则及 fallback 机制](https://github.com/chokcoco/iCSS/issues/7)

16、[你该知道的字体 `font-family`](https://github.com/chokcoco/iCSS/issues/6)

15、[`reset.css` 知多少 ](https://github.com/chokcoco/iCSS/issues/5)

14、[CSS命名方式是否有必要规范](https://github.com/chokcoco/iCSS/issues/59)

13、[引人瞩目的 CSS 自定义属性（CSS Variable）](https://github.com/chokcoco/iCSS/issues/58)

12、[结构性伪类选择器](https://github.com/chokcoco/iCSS/issues/57)

11、[IFC、BFC、GFC 与 FFC 知多少](https://github.com/chokcoco/iCSS/issues/56)

10、[巧妙的实现 CSS 斜线](https://github.com/chokcoco/iCSS/issues/2)

使用单个标签，如何实现下图所示的斜线效果:

9、[巧妙的多列等高布局](https://github.com/chokcoco/iCSS/issues/55)

规定下面的布局，实现多列等高布局，要求两列背景色等高。

html

<div class="container">
    <div class="left">多列等高布局左</div> 
    <div class="right">多列等高布局右</div>
</div>

8、[纯CSS的导航栏Tab切换方案](https://github.com/chokcoco/iCSS/issues/54)

不用 Javascript，使用纯 CSS 方案，实现类似下图的导航栏 Tab 切换：

7、[全兼容的最后一条边界线问题](https://github.com/chokcoco/iCSS/issues/53)

看看下图，常见于一些导航栏中，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷最优雅的实现？

6、[全兼容的多列均匀布局问题](https://github.com/chokcoco/iCSS/issues/52)

如何实现下列这种多列均匀布局：

5、[纯 CSS 实现单行居中显示文字，多行居左显示，最多两行超过用省略号结尾](https://github.com/chokcoco/iCSS/issues/50)

4、[从倒影说起，谈谈 CSS 继承 inherit](https://github.com/chokcoco/iCSS/issues/49)

3、[层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？](https://github.com/chokcoco/iCSS/issues/48)

2、[类似下面这样的条纹边框，只使用一个标签，可以有多少种实现方式 -- 从条纹边框的实现谈盒子模型：](https://github.com/chokcoco/iCSS/issues/1)

1、[下面这个左边竖条图形，只使用一个标签，可以有多少种实现方式：](https://github.com/chokcoco/iCSS/issues/51)

Stargazers over time

Overview (`MCP/README.md`)

iCSS MCP Server 中文使用指南

iCSS MCP Server 是一个基于 Model Context Protocol (MCP) 的服务端，整合了 iCSS 技巧库和 CSS-Inspiration 演示案例，提供 CSS 技巧搜索、分类、文章详情、完整代码演示等能力，支持 Cursor IDE 智能调用。

🚀 快速开始

1. 全局安装（推荐）

bash

npm install icss-mcp-server
icss-mcp-install
# 启动 MCP 服务（如需手动）
icss-mcp

2. NPX 免安装

bash

npx icss-mcp-server
npx icss-mcp-server install

3. 本地开发

bash

git clone https://github.com/chokcoco/iCSS.git
cd iCSS/MCP
npm install
npm run setup
npm start

📋 主要功能

🔍 双库搜索：同时搜索 iCSS 文章和 CSS-Inspiration 演示
📖 文章详情：获取指定 iCSS 文章的完整内容
🎯 演示代码：获取 CSS-Inspiration 的完整可运行代码
🏷️ 智能分类：按技术类别、难度级别浏览内容
🎲 随机发现：随机获取技巧或演示案例
🔧 代码片段：提取和管理 CSS/HTML 代码块
🚀 一键集成：自动配置 Cursor IDE
📊 性能分析：提供浏览器兼容性和性能建议

🛠️ 安装与配置

自动配置

bash

npm install icss-mcp-server
icss-mcp-install

手动配置（如自动失败）

编辑 ~/.config/cursor/mcp_settings.json，添加：

json

{
  "mcpServers": {
    "icss": {
      "command": "node",
      "args": ["/path/to/global/node_modules/icss-mcp-server/server.js"],
      "env": {}
    }
  }
}

重启 Cursor IDE。

💡 Cursor 智能调用示例

“查找 flex 布局的 CSS 技巧”
“iCSS 有哪些动画相关的技巧？”
“如何实现渐变边框？”
“来一个随机 CSS 技巧”
“有哪些 CSS 技巧分类？”
“获取 issue #1 的详细内容”

🧩 MCP 可用工具

工具名	说明	参数
search_css_techniques	搜索 iCSS 技巧文章	query, limit(可选)
search_css_demos	搜索 CSS-Inspiration 演示	query, category(可选), difficulty(可选), limit(可选)
get_css_article	获取 iCSS 文章详情	issue_number
get_css_demo	获取演示完整代码	demo_id
list_css_categories	获取所有分类	source(可选): icss/inspiration/all
get_random_css_tip	随机技巧或演示	source(可选): icss/inspiration/both

🔧 常用命令

bash

icss-mcp                # 启动 MCP 服务
icss-mcp-install        # 自动配置 Cursor
npm run setup           # 初始化数据库
npm run build           # 拉取 iCSS 文章数据
npm run build:inspiration # 拉取 CSS-Inspiration 演示数据
npm run build:all       # 拉取所有数据
npm test                # 测试服务

📊 数据来源

iCSS 技巧库

超过 270 篇高质量 CSS 技巧文章
涵盖动画、布局、特效、性能优化等主题
原始仓库：iCSS

CSS-Inspiration 演示库

包含 14 个分类的完整 CSS 演示
提供可运行的 HTML/CSS 代码
按难度级别分类（初级/中级/高级）
包含浏览器兼容性信息
原始仓库：CSS-Inspiration

技术特性

支持模糊搜索、智能分类
自动提取代码片段
性能分析和优化建议
定期同步最新内容

❓ 常见问题

Cursor 未识别 MCP Server
- 检查配置文件路径和 server.js 路径
- 完全重启 Cursor
数据库报错
- 运行 npm run setup 重新初始化
权限问题
- macOS/Linux 下 chmod +x node_modules/icss-mcp-server/bin/*

📝 贡献与支持

欢迎 PR 和 Issue
iCSS 讨论区
原文档/英文版

Made with ❤️ for the CSS community

Overview (`website/README.md`)

iCSS 网站

基于 GitHub 上的 iCSS 仓库构建的现代化网站，展示 CSS 奇技淫巧。

功能特性

🎨 主题切换

亮色主题: 适合日间使用
暗色主题: 适合夜间使用，护眼
跟随系统: 自动跟随系统主题设置
持久化: 主题选择会保存到本地存储

🌍 多语言支持

中文: 简体中文界面
English: 英文界面
持久化: 语言选择会保存到本地存储

📱 响应式设计

支持桌面端、平板和移动端
自适应布局，提供最佳用户体验

🎯 核心功能

文章列表: 展示所有 CSS 技巧文章
分类筛选: 按分类筛选文章
搜索功能: 支持文章标题搜索
文章详情: 完整的文章内容展示
代码高亮: 支持语法高亮的代码块
CodePen 集成: 直接嵌入 CodePen 演示
上一篇/下一篇: 文章导航功能

技术栈

框架: Next.js 14 (App Router)
语言: TypeScript
样式: Tailwind CSS
状态管理: React Context
动画: Framer Motion
图标: Lucide React
代码高亮: react-syntax-highlighter

快速开始

安装依赖

bash

pnpm install

启动开发服务器

bash

pnpm dev

构建生产版本

bash

pnpm build

启动生产服务器

bash

pnpm start

项目结构

text

icss-website/
├── app/
│   ├── api/                 # API 路由
│   ├── article/            # 文章详情页
│   ├── components/         # 可复用组件
│   ├── contexts/           # React Context
│   ├── lib/                # 工具函数
│   ├── globals.css         # 全局样式
│   ├── layout.tsx          # 根布局
│   └── page.tsx            # 首页
├── public/                 # 静态资源
└── package.json

主题系统

主题配置

主题系统基于 CSS 变量和 Tailwind CSS 的暗色模式实现：

CSS 变量: 定义主题色彩
Tailwind 配置: 支持 dark: 前缀的类名
Context API: 管理主题状态
localStorage: 持久化主题选择

自定义主题

可以通过修改 app/globals.css 中的 CSS 变量来自定义主题色彩：

css

:root {
  --primary: 221.2 83.2% 53.3%;
  --background: 0 0% 100%;
  /* 更多变量... */
}

.dark {
  --primary: 217.2 91.2% 59.8%;
  --background: 222.2 84% 4.9%;
  /* 更多变量... */
}

多语言系统

翻译文件

翻译内容定义在 app/lib/translations.ts 中：

typescript

export const translations: Record<Language, Translations> = {
  zh: {
    loading: '加载中...',
    error: '错误',
    // 更多翻译...
  },
  en: {
    loading: 'Loading...',
    error: 'Error',
    // 更多翻译...
  }
};

使用翻译

在组件中使用 useApp hook 获取翻译函数：

typescript

import { useApp } from '../contexts/AppContext';

function MyComponent() {
  const { t } = useApp();
  
  return <div>{t('loading')}</div>;
}

API 接口

文章列表

text

GET /api/articles?page=1&per_page=12&category=CSS&search=关键词

文章详情

text

GET /api/articles/[id]

分类列表

text

GET /api/categories

测试页面

访问以下页面测试功能：

首页: http://localhost:3000
主题语言测试: http://localhost:3000/test-theme-lang
API 测试: http://localhost:3000/test-api
Demo 测试: http://localhost:3000/test-demo

部署

Vercel 部署

将代码推送到 GitHub
在 Vercel 中导入项目
配置环境变量（如需要）
自动部署

其他平台

项目支持部署到任何支持 Next.js 的平台：

Netlify
Railway
DigitalOcean App Platform
自托管服务器

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License

--- METRICS ---

Files Extracted: 3
Estimated Token Budget: ~6787 tokens
Canonical Reference: https://codewiki.google/github.com/chokcoco/iCSS

Technical Documentation: chokcoco/iCSS

Overview (`readme.md`) Copy Section

Copy Chapter

按分类进行阅读 Copy Section

iCSS 前端趣闻 Copy Chapter

LIST Copy Chapter

220、[浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析](https://github.com/chokcoco/iCSS/issues/275)

219、[巧用 CSS 实现高频出现的复杂怪状按钮 - 内凹平滑圆角](https://github.com/chokcoco/iCSS/issues/272)

218、[巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框](https://github.com/chokcoco/iCSS/issues/271)

217、[【动画进阶】单标签实现多行文本随滚动颜色变换](https://github.com/chokcoco/iCSS/issues/269)

216、[【现代 CSS】更强大的 :nth-child 选择器](https://github.com/chokcoco/iCSS/issues/267)

215、[全尺寸的带圆角的渐变边框](https://github.com/chokcoco/iCSS/issues/266)

214、[巧妙使用多种方式实现单侧阴影](https://github.com/chokcoco/iCSS/issues/265)

213、[渐变边框文字效果？CSS 轻松拿捏！](https://github.com/chokcoco/iCSS/issues/264)

212、[【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究](https://github.com/chokcoco/iCSS/issues/263)

211、[【动画进阶】类 ChatGpt 多行文本打字效果](https://github.com/chokcoco/iCSS/issues/262)

210、[【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width](https://github.com/chokcoco/iCSS/issues/259)

209、[【动画进阶】极具创意的鼠标交互动画](https://github.com/chokcoco/iCSS/issues/258)

208、[【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画](https://github.com/chokcoco/iCSS/issues/257)

207、[【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果](https://github.com/chokcoco/iCSS/issues/256)

206、[现代 CSS 解决方案：accent-color 强调色](https://github.com/chokcoco/iCSS/issues/255)

205、[【动画进阶】神奇的 3D 卡片反光闪烁动效](https://github.com/chokcoco/iCSS/issues/254)

204、[现代 CSS 解决方案：文字颜色自动适配背景色！](https://github.com/chokcoco/iCSS/issues/253)

203、[带圆角的虚线边框？CSS 不在话下](https://github.com/chokcoco/iCSS/issues/250)

202、[【布局技巧】Flex 布局下居中溢出滚动截断问题](https://github.com/chokcoco/iCSS/issues/249)

201、[CSS 也能实现 if 判断？实现动态高度下的不同样式展现](https://github.com/chokcoco/iCSS/issues/248)

200、[【动画进阶】单标签下多色块随机文字随机颜色动画](https://github.com/chokcoco/iCSS/issues/247)

199、[CSS 还原拉斯维加斯球数字动画](https://github.com/chokcoco/iCSS/issues/246)

198、[【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原 ](https://github.com/chokcoco/iCSS/issues/245)

197、[【动画进阶】当路径动画遇到滚动驱动！](https://github.com/chokcoco/iCSS/issues/244)

196、[现代 CSS 解决方案：原生嵌套（Nesting）](https://github.com/chokcoco/iCSS/issues/243)

195、[现代 CSS 解决方案：数学函数 Round](https://github.com/chokcoco/iCSS/issues/242)

194、[震惊！CSS 也能实现碰撞检测？](https://github.com/chokcoco/iCSS/issues/241)

193、[抢先体验！超强的 Anchor Positioning 锚点定位](https://github.com/chokcoco/iCSS/issues/239)

192、[神奇的 3D 磨砂玻璃透视效果](https://github.com/chokcoco/iCSS/issues/238)

191、[【动画进阶】有意思的 Emoji 3D 表情切换效果](https://github.com/chokcoco/iCSS/issues/237)

190、[【动画进阶】有意思的网格下落渐次加载效果](https://github.com/chokcoco/iCSS/issues/235)

189、[解放生产力！transform 支持单独赋值改变](https://github.com/chokcoco/iCSS/issues/236)

188、[单标签下的日间/黑夜模式切换按钮效果](https://github.com/chokcoco/iCSS/issues/234)

187、[现代 CSS 解决方案：CSS 原生支持的三角函数](https://github.com/chokcoco/iCSS/issues/233)

186、[有意思的气泡 Loading 效果](https://github.com/chokcoco/iCSS/issues/231)

185、[有趣的六芒星能力图动画](https://github.com/chokcoco/iCSS/issues/228)

184、[CSS 高阶小技巧 - 角向渐变的妙用！](https://github.com/chokcoco/iCSS/issues/227)

183、[巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画](https://github.com/chokcoco/iCSS/issues/226)

182、[CSS 高阶技巧 -- 不定宽文本溢出跑马灯效果完美解决方案](https://github.com/chokcoco/iCSS/issues/225)

181、[由小见大！不规则造型按钮解决方案](https://github.com/chokcoco/iCSS/issues/224)

180、[动态视口单位之 dvh、svh、lvh](https://github.com/chokcoco/iCSS/issues/223)

179、[开局一张图，构建神奇的 CSS 效果](https://github.com/chokcoco/iCSS/issues/218)

178、[巧用视觉障眼法，还原 3D 文字特效](https://github.com/chokcoco/iCSS/issues/219)

177、[不规则图形背景排版高阶技巧 -- 酷炫的六边形网格背景图](https://github.com/chokcoco/iCSS/issues/215)

176、[现代 CSS 高阶技巧，不规则边框解决方案](https://github.com/chokcoco/iCSS/issues/221)

175、[现代 CSS 高阶技巧，完美的波浪进度条效果！](https://github.com/chokcoco/iCSS/issues/220)

174、[现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！](https://github.com/chokcoco/iCSS/issues/217)

173、[现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/iCSS/issues/214)

172、[除了 filter 还有什么置灰网站的方式？](https://github.com/chokcoco/iCSS/issues/212)

171、[快速构建 3D Visualization of DOM](https://github.com/chokcoco/iCSS/issues/210)

170、[CSS at-rules(@) 规则扫盲](https://github.com/chokcoco/iCSS/issues/204)

169、[CSS 渐变锯齿消失术](https://github.com/chokcoco/iCSS/issues/209)

168、[超强的苹果官网滚动文字特效实现](https://github.com/chokcoco/iCSS/issues/208)

167、[超强的纯 CSS 鼠标点击拖拽效果](https://github.com/chokcoco/iCSS/issues/207)

166、[两道超有意思的 CSS 面试题，试试你的基础](https://github.com/chokcoco/iCSS/issues/206)

165、[单标签实现复杂的棋盘布局](https://github.com/chokcoco/iCSS/issues/203)

164、[新时代布局新特性 -- 容器查询](https://github.com/chokcoco/iCSS/issues/201)

163、[有意思的水平横向溢出滚动](https://github.com/chokcoco/iCSS/issues/200)

162、[高阶 CSS 技巧在复杂动效中的应用](https://github.com/chokcoco/iCSS/issues/202)

161、[有意思的方向裁切 overflow: clip](https://github.com/chokcoco/iCSS/issues/199)

160、[巧用 transition 实现短视频 APP 点赞动画](https://github.com/chokcoco/iCSS/issues/198)

159、[妙啊！纯 CSS 实现拼图游戏](https://github.com/chokcoco/iCSS/issues/197)

158、[多行文本下的文字渐隐消失术](https://github.com/chokcoco/iCSS/issues/196)

157、[使用 CSS 构建强大且酷炫的粒子动画](https://github.com/chokcoco/iCSS/issues/195)

156、[妙用 CSS 构建花式透视背景效果](https://github.com/chokcoco/iCSS/issues/194)

155、[圆角大杀器，使用滤镜构建圆角及波浪效果！](https://github.com/chokcoco/iCSS/issues/192)

154、[超酷炫的转场动画？CSS 轻松拿下！](https://github.com/chokcoco/iCSS/issues/191)

153、[利用噪声构建美妙的 CSS 图形](https://github.com/chokcoco/iCSS/issues/190)

152、[高阶切图技巧！基于单张图片的任意颜色转换](https://github.com/chokcoco/iCSS/issues/189)

151、[使用纯 CSS 实现超酷炫的粘性气泡效果](https://github.com/chokcoco/iCSS/issues/188)

150、[超 Nice 的表格响应式布局小技巧](https://github.com/chokcoco/iCSS/issues/187)

149、[有意思的鼠标指针交互探究](https://github.com/chokcoco/iCSS/issues/186)

148、[使用 content-visibility 优化渲染性能](https://github.com/chokcoco/iCSS/issues/185)

147、[文字轮播与图片轮播？CSS 不在话下](https://github.com/chokcoco/iCSS/issues/184)

Overview (`readme.md`)

按分类进行阅读

iCSS 前端趣闻

LIST

138、[一道有意思的 CSS 面试题，FizzBuzz ~](https://github.com/chokcoco/iCSS/issues/174)