大屏兼容之scale方案
常见方案 vh、vw方案：将所有的尺寸根据设计图换算成vw和vh scale方案：根据设计图的尺寸和当前屏幕的尺寸计算缩放的比例 rem方案：根据设计图和屏幕尺寸计算根元素font size，其他尺寸通过插件换算成rem scale兼容的优缺点 优点：1、代码量极少，只需要处理一次container；2、其他各种图表不用单独进行适配 缺点：1、因为是根据ui进行等比例缩放，所以左右和上下可能会出现白边；2、放大倍数过大会导致图片等失真变...
太神奇了，仅使用彩色字体实现代码高亮
通常情况下，我们要实现代码高亮功能，需要借助复杂的语法高亮库，例如 或 这些库的基本原理是扫描代码，并将关键词包裹一层标签，然后通过 样式改变代码颜色。 但是，这种实现会导致页面非常臃肿，增加了很多额外的标签，就像这样 那么，有没有办法可以在不改变页面 结构的情况下高亮一段代码呢？ 其实也是有的，之前写过一篇文章，可以利用 实现纯文本的代码高亮，有兴趣的可以回顾之前这篇文章 虽然叫做“CSS Custom Highlight API”，...
如何实现渐变色 圆角与倒角 边框
1、完整代码及样式示例 1.1. 渐变色 圆角/倒角 效果图 圆角 倒角 1.2. 渐变色 圆角/倒角 完整示例代码 渐变色色值：linear gradient(270deg,rgba(34,117,211,1) 0%,rgba(14,244,243,1) 49%,rgba(34,117,211,1) 100%) 边宽：5px 宽：300px 高：150px 圆角值： 左上25px 右上30px 右下35px 左下40px 类型：圆角（...
ElementPlus 官网导航栏有点意思，来看看咋实现
导航栏效果如下： 接下来，我们基于 + ，逐步复刻，不过无需关注框架，重点在 。 页面结构 先搭建页面结构，大致包含以下内容： ：容器元素，包裹 header 和 content 元素。 : 顶部栏， absolute 布局，相对于 container 元素，置顶。 : 内容元素，宽高等同 container，可滚动。 布局示意简图： 以下是 Vue 页面代码： 效果如截图所示，由于没有给 header 设置背景， 默认 （透明），所以...
Next.js 项目写 Tailwind CSS 基本都会遇到的两个问题
前言 目前 Tailwind CSS 在 GitHub 有 80k Stars、Npm 周下载量 733W，已经成为前端主流的 CSS 框架。 而 Next.js 脚手架默认集成 Tailwind CSS，创建项目后便可直接使用 Tailwind CSS。 Tailwind CSS 看似使用简单，其实也有一些“门道”在其中。本篇我们就来聊聊 Next.js 项目写 Tailwind CSS 时会遇到的一些问题以及如何解决。 初始化项目...
你不知道到的 CSS - 纯 CSS 获取浏览器宽度
先看效果： 众所周知，我们平时获取获取窗口的宽高都是 获取的，要不然直接通过 的 监听页面宽高变化。 但现在不一样了！我们可以直接通过 获取 的尺寸，并且可以通过变量来进行使用。 在我第一眼看到这个消息的感觉是不可置信！但这是真的，下面我将带大家复习一下在 Vue、React、Svelte 以及原生 中如何获取 尺寸，然后带大家一览新的获取方案！ 示例 点击马上掘金中间的左右箭头，可以查看高度的监听。 本来是先写的传统方案获取尺寸，但想...
纯 CSS 实现的的3种扫光效果
介绍一个比较常见的动画效果。 在日常开发中，为了强调凸显某些文本或者元素，会加一些扫光动效，起到吸引眼球的效果，比如文本的 或者是一个卡片容器，里面可能是图片或者文本或者任意元素 除此之外，还有那种不规则的图片，比如一张奖品图片，只会在图片本身出现扫光，透明度地方则不会 这些是如何实现的呢？一起看看吧 一、CSS 扫光的原理 扫光动画的原理很简单，就是一个普通的、从左到右的、无限循环的位移动画 位移动画可以选择 或者改变 都行。 至于扫...
基于tailwind做前端元素权限控制，还行！
1 背景 1.1 权限控制 在不同颗粒度、纬度的区分下，可以分模块、页面、元素、接口、数据等 当用户加载模块或者页面，可以基于用户的权限在网关和接口侧进行403拦截 接口可以在后端进行拦截器处理 元素可以基于前端用户当前拥有的最小权限颗粒度进行选择性展示或者交互逻辑 数据权限，由接口测把控，控制前端查询、操作，公司内部sql执行器的权限 1.2 RABC模型 RBAC模型（Role Based Access Control：基于角色的访...
聊聊 CSS 中文本下划线
在Web中给文本添加下划线常常出现在 链接的文本上，早期一般使用 属性给文本添加下划线、删除线等。除了 之外，CSS还有很多技术方案可以给文本添加下划线效果，比如 、 、 等。对于Web开发者而言，CSS还有更多的，更灵活的特性实现文本下划线的效果。在这篇文章中，将和大家一起聊聊CSS中其他的特性怎么实现一个更有创意的效果。 新的 特性 并不是一个新特性，在CSS 2.1中， 就可以使用 、 、 和 给文本添加下划线、删除线等效果。只不...