欢迎关注我的公众号：前端侦探今天来用 CSS 实现一个带圆角的环形 loading 动画，效果是这样的先不考虑动画，其实就是这样一个图形那么，如何来绘制呢？下面花两分钟一起看看吧一、CSS实现思路首先，看到这环形逐渐消失的效果，也就是透明度渐变的效果，肯定要联想到锥形渐变conic-gradient() - CSS：层叠样式表 | MDN (...

之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，特别是右下角的“展开收起”按钮，用到了浮动布局，非常巧妙，有兴趣的可以回顾一下。

欢迎关注我的公众号：前端侦探提到锥形渐变conic-gradient（也有的称“角向渐变”），很多人都被这个名称给迷惑了，以为就是用来画圆锥的，比如 {代码...} 这样可以得到锥形的放射性图案当然，再进一步，可以绘制饼图 {代码...} 这个也比较容易想到，如下这类锥形都比较直观，除了这些，还能绘制哪些图案呢？下面就来介绍...

Safari不愧是新时代的 IE，各种 bug 层出不穷。比如有这样一个多行省略打点的布局 {代码...} 这样在文本超过三行的时候就会出现省略号没啥问题，和正常浏览器一样。但是这样有个问题，每行文字右端空隙太大，不美观，如下下面加上文本两端对齐 {代码...} 啪！bug 就出现了当然，如果设计不介意的话，不使用文本两端对齐...

如果出现一种颜色就定义一个变量，每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢？在这里也就是，如何将一个颜色变浅一点？这样做的好处是，如果需要更换主题色，只用修改一个变量就行了，如下

其实，有些情况下是可以不需要偏移量的，不仅实现上更加简洁，适应性也更强，甚至还能实现加上偏移量反而实现不了的布局，一起看看吧，相信会有不一样的体会

传统的思路肯定是通过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 实现了，一起看看吧