使用React封装一个车票半圆分割线

半圆分割线使用场景

• 卡券
• 车票
• 机票
• 超市小票
• 等等

这些使用场景近几年在移动端非常常见，显而易见效果是不错的，最近做移动端时，遇到了这种场景，就学了一下，发现so easy，在学之前是带有恐惧的， 看着就高级，而且还麻烦，就下意识地逃避，说的好听点称“知难而退”，明事理，但并不推荐，知难而退的确可以舒服一时，但逃得了和尚，逃不了庙，以后还是会遇见的，记得有个人说过，

你越担心什么，它就越会发生

.
更不要说技术上的阻挠了，技多不压身嘛，各位都清楚，谁不想拥有非常NB的技术，我天天都在想，甚至做白日梦的想，但终究输给了现实，现实就是，

千万个想法，不如一个行动

action！
action！
action！
动起来，才能有所突破，才能掌握NB的技术，才能。。。（后面的事情可以说是为所欲为了），ok，上效果图和代码：
图一：

图二：

react代码–>

/*
 * @Autor: lingchen.liu
 * @Date: 2022-03-18 20:50:04
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-03-18 22:02:05
 */
import React, { FC } from "react";
import { View } from '@tarojs/components';
import './index.scss'

const CardLine: FC = () => {
  // 卡片之间的虚线半圆分割线
  return (
    <View className="card">
      <View className="top">
      </View>
    </View>
  )
}
export default CardLine

样式代码：

.card {
  background: #F8F8F8FF;
  border-radius: 40px;
  box-sizing: border-box;
  padding: 0 56px;
  margin: 0 0 -12px 0;
}

.top {
  box-sizing: border-box;
  padding-top: 0px;
  border-bottom: 3px dashed #cccacaf8;
  position: relative;
}

.top::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 44px;
  background: #F8F8F8FF;
  left: -24px;
  bottom: -24px;
  border-radius: 0 22px 22px 0;
}

.top::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 44px;
  background: #F8F8F8FF;
  right: -24px;
  bottom: -24px;
  border-radius: 22px 0 0 22px;
}

再来一张 代码截图：

完事。