在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>
相关推荐
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客8 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8888 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家8 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试