很多时候，在使用 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也赋予了...

欢迎关注微信公众号前端侦探温馨提示：在阅读本文之前，可以先回顾这篇文章：Web 中的“选区”和“光标”，有很多你可能不太知道的原生 API，以下内容是对该内容的实践运用在写作编辑中，有很多需要成对出现的标点符号，比如引号、括号、书名号等，如下所示：为了方便输入，某些输入法自带了标点自动配对功能。什么意思呢？...

欢迎关注我的公众号：前端侦探今天真是太热了，不信你看标题今҈天҈真҈是҈热҈化҈了҈！也可以查看下面截图相信大家最近都能看到这样“热化了”的标题。那么，这是如何实现的呢？CSS 可以实现类似的效果吗？一起看看吧一、菊花字符 488首先，这类字符效果实现很简单，本质就是插入了一个特殊的“花漾字符”，可以在控制台上看到...

欢迎关注微信公众号：前端侦探介绍一个和深色模式相关的CSS属性：color-scheme一、什么是 color-scheme？color-scheme顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的更改浏览器的默认配色方案，语法如下 {代码...} 几个关键词如下normal：表示元素未指定任何配色方案，因此应...

欢迎关注微信公众号： 前端侦探介绍一个 CSS 动画合成小技巧。先看效果这是一个非常“动感”的倒计时效果，通常在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画数字的变化缩小和放大透明度变化不知道小伙伴能否观察出来呢？下面来一起来看看具体实现吧一、数字的变化先来看数字的变化。这个技...

在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影

欢迎关注微信公众号： 前端侦探最近在项目中碰到一个这样的角标设计，如下像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）一、圆角矩形和三角形从设计上可以拆分成两部分，一个圆角矩形和一个三角形假设 HTML 是这样的 {代码...} 圆角很好实现，border-radius就行，如下 {代...

很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode

欢迎关注微信公众号： 前端侦探在 web 开发中，经常会碰到需要拖拽的场景。为了更好的体验，拖拽区域需要有一定的变化提示，告诉用户："现在可以放在这里了~"，例如这样的之前在这篇文章讲述了如何自定义 drag 样式，这次接着探索一下如何自定义 dragover 样式。一、dragenter 和 dragleave要实现这样的效果，少不了和dr...

在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：