在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 的预设,比如:
<!-- border-width: 1px; -->
<div class="b"></div>
<!-- border-width: 2px; -->
<div class="b-2px"></div>
<!-- border-width: 2px; border-style: solid;-->
<div class="b b-solid"></div>
<!-- border-width: 1px; border-color: red; -->
<div class="b b-red"></div>
<!-- border-width: 1px; border-color: red; border-style: dashed; -->
<div class="b b-dashed b-red"></div>
为什么只设置 boder-width: 1px;
也能看到边框效果呢?这是因为浏览器为每个元素都设置了一个默认的边框样式,只是 boder-width
的默认值是 0px
,所以最少只需要设置 border-width 就能看到边框效果
当然 unocss 预设中边框的写法也可以单独定义每个方向的宽度、样式和颜色,比如
<!-- border-left-width: 1px; 效果:只有左边边框 -->
<div class="b-l"></div>
<!-- border-width: 1px; border-left-style: dashed; 效果:四边边框,左边边框 dashed -->
<div class="b b-l-dashed"></div>
<!-- border-width: 1px; border-left-color: red; 效果:四边边框,左边边框为红色 -->
<div class="b b-l-red"></div>
<!-- border-width-left: 2px; border-left-color: red; border-left-style: dashed; 效果:只有左边 2px red dashed 的边框 -->
<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(' '),
}
},
],
],
})
怎么用呢?
- 完整的写法
<!-- border: 2px dashed red; -->
<div class="bd-2px_dashed_red"></div>
<!-- border-left: 2px dashed red; -->
<div class="bl-2px_dashed_red"></div>
<!-- border-right: 2px dashed red; -->
<div class="br-2px_dashed_red"></div>
- 缺省的写法
border-width 、 border-style 和 border-color 都可以缺省(但最少写一个),border-style 默认 solid,border-width 默认 1px,border-color 默认继承父容器的 color
<!-- border: 2px solid; border-color 继承父容器的 color-->
<div class="bd-2px"></div>
<!-- border: red solid 1px; -->
<div class="bd-red"></div>
<!-- border: dashed 1px; border-color 继承父容器的 color-->
<div class="bd-dashed"></div>
<!-- border-left: 2px solid; border-color 继承父容器的 color-->
<div class="bl-2px"></div>
<!-- border-left: red solid 1px; -->
<div class="bl-red"></div>
<!-- border-left: dashed 1px; border-color 继承父容器的 color-->
<div class="bl-dashed"></div>
<!-- border-left: 2px solid; border-color 继承父容器的 color-->
<div class="bl-2px"></div>
<!-- border-left: red solid 1px; -->
<div class="bl-red"></div>
<!-- border-left: dashed 1px; border-color 继承父容器的 color-->
<div class="bl-dashed"></div>
可以看出这种写法是不是更简洁、更容易理解呢!
为什么 border-width 、 border-style 和 border-color 最少得写一个,全部缺省不是更好吗?
答: unocss 的默认写法就是可以全缺省的,没必要多此一举了,如 b
b-r
b-l
b-t
b-b
为什么用
bd
表示 border 而不用b
?
主要是为了跟 unocss 的默认写法区分开来,其次 bd
也勉强符合 border
语义的简写。
以上就是本篇文章分享的所有内容了,希望对大家有帮助。
关注我,大脸怪将持续分享更多实用知识和技巧
原文链接:https://juejin.cn/post/7348473946582646784 作者:大脸怪