36 lines
898 B
Markdown
36 lines
898 B
Markdown
|
---
|
|||
|
|
tag: md-border
|
|||
|
|
icon: 🖼️
|
|||
|
|
title: 边框组件
|
|||
|
|
description: 为文档卡片添加纯色或图片边框，支持指定边、样式和重复模式。
|
|||
|
|
syntax: ':md-border[#3b82f6]{.l .dashed}'
|
|||
|
|
props:
|
|||
|
|
- name: width
|
|||
|
|
type: string
|
|||
|
|
default: 纯色 .2mm，图片 2mm
|
|||
|
|
desc: 边框宽度
|
|||
|
|
- name: slice
|
|||
|
|
type: string
|
|||
|
|
default: '"10"'
|
|||
|
|
desc: border-image-slice（仅图片模式）
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**纯色左边框：**
|
|||
|
|
:md-border[#3b82f6]{.l}
|
|||
|
|
|
|||
|
|
**虚线上下边框：**
|
|||
|
|
:md-border[red]{.t .b .dashed width=".2mm"}
|
|||
|
|
|
|||
|
|
**图片边框：**
|
|||
|
|
:md-border[./images/frame.png]{.all .round}
|
|||
|
|
|
|||
|
|
**左右图片竖条：**
|
|||
|
|
:md-border[./images/ornament.png]{.l .r .repeat}
|
|||
|
|
|
|||
|
|
边 class：`t` `b` `l` `r` `all`（默认）
|
|||
|
|
样式 class：`solid` `dashed` `dotted` `double`
|
|||
|
|
图片 class：`stretch` `repeat` `round` `space`
|
|||
|
|
|
|||
|
|
## 使用场景
|
|||
|
|
|
|||
|
|
用于装饰文档卡片，配合背景和字体营造特定风格。
|