传统的思路肯定是通过JS去动态计算容器的高度，但这样就涉及到加载时机的问题，获取早了可能元素还没渲染好，晚了又会有明显的卡顿感，或者会引起页面的闪烁。

介绍一个比较前沿但是非常有用的新特性：一个浏览器原生支持的 CSS 文本高亮高亮功能，官方名称叫做 CSS Custom Highlight API，有了它，可以在不改变 dom 结构的情况下自定义任意文本的样式，例如

欢迎关注我的公众号：前端侦探众所周知，高度在设置成auto关键词时是不会触发transition过渡动画的，下面是伪代码 {代码...} 效果如下如果希望展开时有过渡动画，例如这样通常是借助 JS 动态去获取元素的高度（还有些麻烦的，需要渲染后才能知道高度）。其实CSS 也有一个巧用max-height适配动态高度的解决方案，下面是伪...

想必大家都知道 HTML5 中有 dialog 这样一个标签，顾名思义，就是“弹窗”。除了有良好的语义外，随着浏览器的不断更新迭代，还出现了许多你可能不知道的特性，快速了解一下吧~

欢迎关注我的公众号：前端侦探2022 全年共计发布了 41 篇关于 CSS 的原创文章。为了方便查阅学，花了一点时间分类整理了一下，按照时间倒序排序如下CSS 如何根据背景色自动切换黑白文字？CSS 如何实现羽化效果？万能的CSS 渐变！单标签绘制一个足球场CSS、SVG、Canvas对特殊字体的绘制与导出CSS 绘制一个3d掘金 logo还在...

欢迎关注我的公众号：前端侦探最近有同事问我这样一个问题：需要绘制一个自适应文本的写作网格线，设计稿是这样的其实就是一行行虚线，要求如下虚线的纵向间隔要跟随行高自适应，确保文本在每一栏虚线上虚线后面的背景是动态的，可以是纯色，可以是渐变，也可以是图片绘制这样的虚线，看似容易，其实暗藏玄机，下面一起...

欢迎关注我的公众号：前端侦探在上一篇 CSS 如何根据背景色自动切换黑白文字？中，讲述了文本自适应背景色的一些小技巧，不过还存在一定局限性，比如：如果是背景是渐变色该怎么办？很容易想到的思路是将两个渐变色取过渡中间色，然后再通过前面的方式转换就行了那么问题来了，有没有办法通过 CSS 实现中间颜色的获取呢...

在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样：

大家好，我是侦探（今年的新称号）~又到了年末，来看看今年做了哪些事吧关于思否截止到今天（2022-12-17），我在思否上的发文刚刚超过 100 篇在整个 2022 年当中，相比之前还算是比较勤快的，基本维持一周一更的节奏，数据如下：文章：47篇回答：120 个，其中被采纳 46个声望：+4487其他荣誉：第三季度Top Writer另外，...

很多时候，在使用 Canvas 绘制圆角矩形都是一件比较麻烦的事，因为之前并没有直接的方法，只能通过直线和圆弧间接组合而成，下面是一个常规绘制方式

欢迎关注我的公众号：前端侦探最近碰到这样一个问题，在一张封面上直接显示书名，可能会存在书名看不太清楚的情况（容易受到背景干扰），如下为了解决这个问题，设计师提了一个“究极”方案，将书名背后的图片模糊一下，这个在 CSS 中很好实现，仅需backdrop-filter即可 {代码...} 当然，现在模糊是模糊了，但是边缘过于“...

一眼望去，这里的形状只有圆形和矩形，在不借助其他标签的情况下（包括伪元素），其实很容易联想到渐变，一起看看如何绘制的吧，有非常多的渐变小技巧~

欢迎关注我的公众号：前端侦探最近在项目中需要对特殊字体进行绘制与导出，如下简单解释一下：所谓绘制，就是视觉上可以看到就行（预览状态），导出呢，就是将看到的转换成图片（或者Canvas），以便于后续处理。这里总结了 3 种方式，分别是 CSS 、 SVG、Canvas，来看看各自有什么差异和优缺点吧一、CSS 的绘制与导出首...

尝试一下用 CSS 绘制简单的 3d 图形，比如一个掘金 logo？相比 2d 绘制，3d 有哪些需要注意的小细节呢？一起看看吧一、金字塔形/四棱锥形除去挖空部分，整个外形其实是一个金字塔形，或者叫四棱锥形（四角锥）一共有5个面，所以我们可以准备5个元素 {代码...} 其中，bottom表示底部的正方形，其余4个表示侧面4个三角形。...

举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库

欢迎关注我的公众号：前端侦探聊一聊关于transform的一些事以及复杂属性的处理方式一、transform 很容易被占用众所周知，CSS 中的transform是一个包含很多值的属性，例如 {代码...} 但是，这并不是简写，而是就该这么写，这一点和background不一样 {代码...} 分开写的好处在于，如果只需要改变某一部分就很容易覆盖 {代...

欢迎关注我的公众号：前端侦探介绍两个和滚动定位相关的 CSS 属性：scroll-padding和 scroll-margin在平时开发中，经常会碰到需要快速定位的问题，比如常见的锚点定位 {代码...} 这样，在点击a标签时会自动定位到与之相对应的内容上，如下但是，这种通过锚点触发的定位默认是紧贴滚动容器边缘的，如果一些定位元素，比如...

欢迎关注我的公众号：前端侦探Ant-design 中有一个这样的头像组件，当字符串较长时，字体大小可以根据头像宽度自动调整，效果如下当然，这里是通过JS根据字符数量自动缩放文本实现的而现在，仅仅通过 CSS也能达到类似的效果，如下一起看看吧你也可以提前访问线上 demo： CSS avator (runjs.work)一、CSS 容器尺寸单位实...

欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(>^ω^<)独角猫，也是社区的首席摸鱼官你也可以提前查看完整代码 CSS sifou cat (runjs.work)其实还是有点小复杂...

通常情况下，反弹效果可以反映出是否滚动到了边界，让滚动体验更加丝滑，算是一种体验的提升，但是如果页面总有fixed定位元素，同样也会受到影响，在视觉上不是那么美观，那有没有办法阻止呢？

欢迎关注我的公众号：前端侦探介绍一个全新的、和用户行为息息相关的属性：inert。HTMLElement.inert - Web APIs | MDN (mozilla.org)有了这个属性，可以更加轻易地控制很多交互行为，花几分钟了解一下吧一、inert 是什么？inert是 HTMLElement 的一个布尔属性，意为"惰性"，简单来说，可以禁用一切交互，包括鼠标点击、...

欢迎关注我的公众号：前端侦探通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了 {代码...} 这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是某某书院的首页排行榜效果这里的主要交互有以下几个鼠标滑过触发选中态鼠标移出列表后仍然保留上一次的选中态（重点）默认...

前不久在这篇文章：CSS 有了:has伪类可以做些什么 中介绍了:has伪类的一些使用场景，可以说大大颠覆了 CSS 选择器的认知，让很多繁琐的 js逻辑通过灵活的CSS轻易实现了。这次带来一个比较常见的案例，3d 轮播图，就像这样的

:has伪类是一个非常强大的伪类，强大到难以置信，可以做很多梦寐以求的事情，很多以前只能更改 dom 结构 或者只能用 JS 才能实现的功能现在也能纯 CSS 实现了，一起看看吧

平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法，一起了解一下吧，相信可以带来不一样的体验

欢迎关注我的公众号：前端侦探之前做了一个 Chrome 插件，可以根据地址的不同生成不同的图标，这样可以很方便的区分不同的开发环境，效果如下主要实现过程其实不复杂，首先获取网站 favicon，然后给 favicon 添加标识，重新绘制生成就行了其中，这里的图标就是通过 SVG 生成的，下面看看具体实现吧。一、favicon 的获取...

最近在几篇文章中都用到了 CSS 计数器，可以将 CSS 变量通过伪元素content动态展示出来，还可以做出很多有趣的动画。有兴趣的可以先回顾一下之前的这几篇文章：

欢迎关注我的公众号：前端侦探在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下这个动画有两部分组成，其中这个随机表情的实现可以参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画比较类似，这里就不重复了，我们这里要实现的是这个不断变化的数字动画，如下演示仔细观察，主要有以下几个交...

欢迎关注我的公众号：前端侦探众所周知，Windows和macOS的滚动条在默认情况是不一致的，最显著的区别就是 macOS滚动条是不占据屏幕尺寸的，如下而Windows下是这样的很多设计师会吐槽Windows滚动条不太美观，能不能自定义成macOS那样呢？当然也是可以的！一起看看吧一、自定义滚动条外观考虑到桌面端现在已经是-webkit-的...

欢迎关注我的公众号：前端侦探在很多客户端应用程序中，一般会通过应用图标的角标来显示当前消息的数量，例如其实，web 中也有类似的设定，花两分钟了解一下吧一、navigator.setAppBadge现在的navigator早已不是以前的navigator了，印象中的navigator通常用于获取设备的信息，浏览器发展这么多年，现在navigator也赋予了...