在UnoCSS中定义1PX边框语法规则

在项目中使用UnoCSS时,实现移动端1px精细边框适配

适配规则定义:

  • 1bdr 四边框
  • 1bdr-t 上边框
  • 1bdr-b 下边框
  • 1bdr-l 左边框
  • 1bdr-r 右边框

要实现上面的规则,可以unocss中自定义规则 unocss 规则

uno.config.ts 中定义 rules

js 复制代码
import {
  type Preset,
  defineConfig,
  toEscapedSelector,
} from 'unocss'

export default defineConfig({
    ...
    rules: [
     [
      /^1bdr(-[t|b|r|l])?$/,
      ([, poi], { rawSelector }) => {
        const color = 'rgba(0, 0, 0, 0.15)'
        const positions = ['-top', '-bottom', '-right', '-left']
        const pos = positions.find((v) => v.startsWith(poi))
        const bdr = `border${pos}: 1px solid ${color};`
        // console.log(poi, bdr)

        const selector = toEscapedSelector(rawSelector)
        return `
          ${selector} {
            position: relative;
          }
          ${selector}::after {
            content: " ";
            position: absolute;
            width: 200%;
            height: 200%;
            top: 0;
            left: 0;
            ${bdr}
            transform: scale(0.5);
            transform-origin: 0 0;
            pointer-events: none;
            border-radius: inherit;
          }
        `
      },
    ],
   ]
   ...
})

使用

html 复制代码
// 可适配 border-radius
<div class="1bdr rounded-2 p-2 m-2"></div>

<div class="1bdr-b p-2 m-2"></div>
相关推荐
庸俗今天不摸鱼2 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下9 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox19 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞22 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行22 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581023 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周27 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring