css:圆角不同渐变色边框

思路：

1. 定义圆角边框透明色的矩形，再定义4条渐变色的background-image，绝对定位到4个边框的位置
2. 内部嵌套圆角边框透明色的矩形

image.png

export const RoadContent = styled(FlexViewColumn)`
  width:100px;
  height:100px;
  border-radius: 4px;
  background-color: #212121;
  border: 1px solid transparent;
  background-image: linear-gradient(to right,${colors.green}, ${colors.bgColor}),
                    linear-gradient(to bottom, ${colors.bgColor}, ${colors.green}),
                    linear-gradient(to left, ${colors.green}, ${colors.bgColor}),
                    linear-gradient(to top, ${colors.bgColor}, ${colors.green});
  background-origin: border-box;
  background-size:  100% 5px,
                    5px 100%,
                    100% 5px,
                    5px 100%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
  overflow: hidden;
`
export const RoadContentSub = styled(FlexViewColumn)`
  background-color: #212121;
  width:100%;
  height:100%;
  border-radius: 4px;

`

 <RoadContent>
      <RoadContentSub>

      </RoadContentSub>
    </RoadContent>