ColorUI/pages/border/border.wxml

<view class="bar">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>实线</text>
  </view>
</view>
<view class="flex p-xs mt-xs mb-sm flex-direction text-center">
  <view class='doc-box-sub p-sm m-xs solid'>solid</view>
  <view class='doc-box-sub p-sm m-xs solid-top'>solid-top</view>
  <view class='doc-box-sub p-sm m-xs solid-right'>solid-right</view>
  <view class='doc-box-sub p-sm m-xs solid-bottom'>solid-bottom</view>
  <view class='doc-box-sub p-sm m-xs solid-left'>solid-left</view>

  <view class='doc-box-sub p-sm m-xs solids mt-xl'>solids</view>
  <view class='doc-box-sub p-sm m-xs solids-top'>solids-top</view>
  <view class='doc-box-sub p-sm m-xs solids-right'>solids-right</view>
  <view class='doc-box-sub p-sm m-xs solids-bottom'>solids-bottom</view>
  <view class='doc-box-sub p-sm m-xs solids-left'>solids-left</view>
</view>

<view class="bar mt-sm">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>虚线</text>
  </view>
</view>
<view class="flex p-xs mt-xs mb-sm flex-direction text-center">
  <view class='doc-box-sub p-sm m-xs dashed'>dashed</view>
  <view class='doc-box-sub p-sm m-xs dashed-top'>dashed-top</view>
  <view class='doc-box-sub p-sm m-xs dashed-right'>dashed-right</view>
  <view class='doc-box-sub p-sm m-xs dashed-bottom'>dashed-bottom</view>
  <view class='doc-box-sub p-sm m-xs dashed-left'>dashed-left</view>
</view>

<view class="bar mt-sm">
  <view class='ml-sm'>
    <text class='iconfont icon-titles success-text'></text><text class='text-lg ml-xs'>阴影</text>
  </view>
</view>
<view class="flex p-xs mt-xs pb-lg flex-direction text-center">
  <view class='doc-box-sub p-sm m-xs shadow'>shadow</view>
  <view class='doc-box-sub p-sm m-xs mt-xl shadow-lg'>shadow-lg</view>
  <view class='doc-box-sub p-sm m-xs mt-xl shadow-alice'>shadow-alice</view>
</view>