一个周五的晚上，闲来无事整理下自己的 github（经常做收藏党），今天打算都过一遍，发现一个 star很高的项目，里面有大量的 CSS 片段，而且标题很诱人，然后又花了将近1个小时从头到尾过了一遍，其中一些是我们常用的一些知识点，另外也包含一些比较新的属性的应用，知识点挺多的，为了让大家看起来更方便些，然后又花了点（很长很长）时间翻译成中文。

ps: 公众号内不能插入外部链接，想要更好的阅读体验可以点击文末的阅读原文

本文属于意译而非直译，为了方便理解也增加了一些自己的语言，如果存在偏差或错误还请留言指正。

精选的有用CSS片段集合，您可以在30秒或更短的时间内理解这些片段。

本 CSS 精选集合共分为5类 - 布局、视觉、动画、交互、其他。

更加详细的内容还请看 原文档。">

可在 CodePen 上查看真实效果和编辑代码

• 使用margin：-1px取消元素的高度和宽度
• 绝对定位元素，使其不占用DOM中的空间

100% 需要使用前缀 caniuse(虽然cilp已被废弃，但较新的clip-path 目前对浏览器的支持非常有限。)

CodePen上预览和编辑代码

当元素的高度未知时，将元素的高度从0转换为自动。

CodePen上预览和编辑代码

• 注意：将会导致所有动画帧重排，过度中如果元素下方有大量元素，则可能会出现滞后现象。

在文本上悬停时，在文本周围创建一个阴影框动画效果。

动画效果可在CodePen上预览和编辑代码

浏览器支持程度97.3%

当文本悬停时，创建文本下划线动画效果。

动画效果可在CodePen上预览和编辑代码

• display:inline-block 使p成为内联块，以防止下划线跨越整行宽度而不仅仅是文本内容。
• position:absolute 将伪元素脱离文档六，并将其相对于父元素定位
• width:100% 确保伪元素和父元素的宽度一致。
• :hover::after 然后使用scaleX（1）将宽度转换为100％，然后将中心点更改为左下角，允许它在悬停时从另一个方向转换出来。

浏览器支持程度97.5%

交互 40. 禁用选择

使用 css 让内容无法选取。

可在CodePen上预览效果和编辑代码

浏览器支持程度93.2%（需要使用前缀，这并不是防止用户复制内容的安全方法。）

在悬停和焦点上弹出交互式菜单。

可在CodePen上预览效果和编辑代码

• left:100% 弹出菜单从左侧偏移其父级宽度的100％。

浏览器支持程度 100%;

悬停时兄弟节点淡化显示.

可在CodePen上预览效果和编辑代码

浏览器支持程度 97.5%；

函数calc允许使用数学表达式定义CSS值，属性采用的值是数学表达式的结果。

可在CodePen上预览效果和编辑代码

如果你想在右侧和底部对齐背景图像，则只能使用直线长度值。所以现在可以使用calc函数.

• 允许加法，减法，乘法和除法。
• 可以为表达式中的每个值使用不同的单位（例如，像素和百分比）。
• 允许嵌套calc函数。

浏览器支持程度 97.0%

包含要重用的特定值的CSS变量。

可在CodePen上预览效果和编辑代码

浏览器支持程度 91.6%

更多精彩好玩有用的前端内容，请关注公众号《前端开发攻城狮》

动动小手，让更多人看到