Unocss 写 border太费劲？试试这样

在css中， border 是高频使用的一个属性，但它的写法有非常非常多。

按属性分类，border 属性可以分为以下几类：

• border-width：设置边框的宽度。
• border-style：设置边框的样式。
• border-color：设置边框的颜色。

按方向分类，border 属性可以分为以下几类：

• border-top：设置上边框的宽度、样式和颜色。
• border-right：设置右边框的宽度、样式和颜色。
• border-bottom：设置下边框的宽度、样式和颜色。
• border-left：设置左边框的宽度、样式和颜色。

一般情况下我们会直接使用 border 属性，它是一个简写属性，可以同时设置边框的宽度、样式和颜色。

div {
border: 1px solid red;

}

如果我们要单独设置某个方向边框的某个属性，可以使用以下属性：

• border-top-width：设置上边框的宽度。
• border-top-style：设置上边框的样式。
• border-top-color：设置上边框的颜色。

div {
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;

}

我们也可以单独设置某个方向的边框宽度、样式和颜色，可以使用以下属性：

• border-top：设置上边框的宽度、样式和颜色。
• border-right：设置右边框的宽度、样式和颜色。
• border-bottom：设置下边框的宽度、样式和颜色。
• border-left：设置左边框的宽度、样式和颜色。

div {
border-top: 1px solid red;

}

以上的写法，最常用的还是简写方式，如：

• 简写属性：border: 1px solid red;
• 单个方向的属性：border-top: 1px solid red;

在 unocss 中，我们怎么写边框呢?

可以使用 border 的预设，比如：

<div class="b">div>


<div class="b-2px">div>


<div class="b b-solid">div>


<div class="b b-red">div>


<div class="b b-dashed b-red">div>

为什么只设置 boder-width: 1px; 也能看到边框效果呢？这是因为浏览器为每个元素都设置了一个默认的边框样式，只是 boder-width 的默认值是 0px，所以最少只需要设置 border-width 就能看到边框效果

当然 unocss 预设中边框的写法也可以单独定义每个方向的宽度、样式和颜色，比如

<div class="b-l">div>


<div class="b b-l-dashed">div>


<div class="b b-l-red">div>


<div class="b-l-2px b-l-red b-l-dashed">div>

由上可知 unocss 的 border 预设其实就是将 border-width 、 border-style 和 border-color 分别定义，然后又可以各自组合上 left、right、top 和 bottom，这样就可以控制每一个方向的边框

这样写当然没什么问题，也非常的灵活，但仔细想想是不是过于麻烦了呢，为什么会觉得麻烦呢？原因就是这样写没有利用到 border 的简写方式，比如 左边 2px red dashed 的边框 我们其实是可以简写成这样的：

div {
border-left: 2px dashed red;

}

甚至我们写行内样式也比 b-l-2px b-l-red b-l-dashed 这种写法更简洁易懂

<div style="border-left: 2px dashed red;">div>

那么，有没有办法不写 css 也能做到这么简洁呢，并且还不能损失它的灵活性

当然有，答案就是自定义rules

// unocss配置文件， uno.config.js|ts

import { defineConfig, presetUno } from 'unocss'
const DIRECTION_MAPPIINGS = { t: 'top', r: 'right', b: 'bottom', l: 'left' }

export default defineConfig({

  presets: [

    presetUno,

  ],

  rules: [

    [
/^b(t|r|b|l|d)-(.*)/,

      ([, d, c]) => {
const direction = DIRECTION_MAPPIINGS[d] || ''
const p = direction ? `border-${direction}` : 'border'
const attrs = c.split('_')
if (
// 属性中不包含 border-style 则默认 solid

          !attrs.some((item) =>
/^(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)$/.test(item),

          )

        ) {

          attrs.push('solid')

        }
// 属性中不包含 border-width 则默认 1px
if (!attrs.some((item) => /^\d/.test(item))) {

          attrs.push('1px')

        }
return {

          [p]: attrs.join(' '),

        }

      },

    ],

  ],

})

怎么用呢？

<div class="bd-2px_dashed_red">div>

<div class="bl-2px_dashed_red">div>

<div class="br-2px_dashed_red">div>

2. 缺省的写法