多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。 另外这里，老姚谢谢各位一如既往的支…

这是一个包含 70+ 个精心挑选的基于 Web 的工具的集合，这些工具实际上非常有用。每一个工具都会生成纯 CSS，无需 JS 或任何外部库。感谢每一个应用程序背后的作者。

按照规范，css3 中的伪元素的话，应该使用的是双冒号（::）而不是单个冒号（:），但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。 要创建一个四分之一的椭圆，其中一个角的水平和垂直值都需要等于100%，而其他…

1. 三角形 我们知道，如果设置一个盒子的宽高为 0，盒子就会变成一个点。此时再给上下左右四个 border 一定的宽度和不同的颜色，那么单纯由 border 填充的盒子看起来是这样的： 上面两种方法效果一样，接着根据实际情况隐藏其中三个三角形即可。我们这里只想要显示底下的三角…

💥 🔖 好玩的 CSS - 40 个有趣的 CSS 网站 🌐 基础学习 🧚 CSS 动画 🕹️ 教学游戏 🎰 代码生成 🎨 色彩搭配

环(圆)形进度条实习: 渐变效果怎么实现 优化模拟进度效果实现, 优化代码逻辑, 支持 css 变量, 抽取变量方便配置

1.一行显示（实测有效） 2.多行显示超出显示省略号（实测有效） 3.设置滚动条样式 4.水平垂直居中 定位 table Flex 弹性盒子 grid栅格布局 5.box-shadow参数说明 box

国人整理的各种 CSS 布局、阴影（box-shadow、drop-shadow）、 伪类/伪元素、滤镜、边框、背景/渐变、混合模式、3D、动画/过渡等等。 可以在线编辑代码，以及大家的作品集展示哦。