🍀一、渐变神器Gradient 🍀二、两款阴影工具在线网站 🍀三、网站UI配色宝藏网站UI Design Daily 🍀四、 Small Dev tools实用工具合集 🍀五、 Glass Morph

那天在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇，于是决定一探究竟。

在开发中遇到类似清除浮动、小图标、替换内容等场景时不可避免会遇到 content 属性，一般就是百度下解决方案，甚少细究到底，在看《CSS 世界》这本书时看了下 content 章节，今天这里就

效果（完整代码在底部）： 实现并不难，都是重复的代码比较多。 实现（可跟着一步一步写）： 1. 先定义基本标签： 2. 定义左右眼的基本css样式： border-bottom: 5px solid

H5项目适配深色模式方案： 声明 color-scheme， 通过 CSS 媒体查询根据不同模式采用不同的样式， 利用picture+source标签，设置不同模式下的图片 url， Js监听模式变化

将高亮的方块盒子的执行顺序定义好，利用定时器将速度调节为由快到慢，等速度降到某个区间就判断高亮的下标是否匹配最终的奖品下标，匹配则开奖，不匹配则继续降速。 每到特殊的节日或者搞活动的时候就需要开发配合运营，搞一些抽奖的活动，比较常用的抽奖方式有：大转盘，九宫格，老虎机等。这次我…

在移动端web开发中，如果UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。 设备像素比：dpr=window.devicePixelRatio，也就是设备的物理像素与…

display 设置了 none 属性会隐藏元素，且其位置也不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。 不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是…

去年差不多这个时候，发了一篇关于CSS 固定宽高比实现的文章，总结了如何从面试者的角度回答固定宽高比实现的问题。如果你对于历史的 hack 方式不太熟悉，建议先浏览一下原文章。 原文章的最后提到了 aspect-ratio 这种方式。不过当时还没有浏览器实现，现在标准以及实现都…