vant sidebar,vant-cli,vant html,vant custom-class,vant cli,vant组件
Vant4 Style 是 Vant 团队开发的一套基于 Vue3 的 UI 组件库，它内置了一些样式以提高组件的美观程度和用户体验。这些内置样式是可以在 Vant4 中直接使用的，无需开发者自行编写样式代码。

举个例子，Vant4 内置了一些常用的颜色变量，例如 $van-red、$van-blue 等，开发者可以利用这些变量来实现更加丰富多彩的 UI 设计。同时，Vant4 还提供了一些内置的 CSS 类名，例如 van-hairline、van-ellipsis 等，这些类名可以帮助开发者快速地实现一些常见的 UI 效果，比如实现一个像素细的边框或文本溢出省略号等效果。

下面是一个简单的例子，展示了如何使用 Vant4 内置的 hairline 类名来实现一个像素细的边框：

html
<template>
<div class="wrapper">
<div class="content van-hairline--top-bottom">
<!-- 此处省略其他内容 -->
</div>
</div>
</template>

<style>
.wrapper {
padding: 20px;
}

.content {
background-color: #fff;
}
</style>


在上述代码中，我们首先定义了一个包裹层（wrapper），并对其设置了一些 padding 样式。然后在 wrapper 中定义了一个 content 容器，我们想要为其添加一个像素细的边框。为了实现这个效果，我们可以使用 Vant4 内置的 van-hairline 类名，并加上其提供的 top-bottom 修饰符来表示只在容器的上下两侧添加边框。最后，我们只需设置 content 的背景色就可以实现一个带有细边框的容器效果了。