html
<view bindtap="onPickUpGoods" data-goods="{{item}}" data-url='../pickUpGoods/pickUpGoods' class="pick-up-goods-btn" bindtap="onPickUpGoods">
<view class="pick-up-goods-text">提货</view>
</view>
css
.pick-up-goods-btn {
vertical-align: top;
// border-right-style: dotted;
// border-width: 12rpx;
border-radius: 8rpx;
width: 20%;
height: 100%;
position: relative;
display: inline-block;
color: #FFFFFF;
background-image: linear-gradient(-135deg, #FF4A94 0%, #FF2424 100%);
.pick-up-goods-text {
font-family: SourceHanSansCN-Regular;
font-size: 30rpx;
width: 30rpx;
line-height: 45rpx;
margin: auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
}
.pick-up-goods-btn:before, .pick-up-goods-btn:after {
content: ' ';
width: 0;
height: 100%;
/* 绝对定位进行偏移 */
position: absolute;
top: 0;
}
.pick-up-goods-btn:after {
/* 圆点型的border */
border-right: 15rpx dotted #f6f6f6;
/* 偏移一个半径,让圆点的一半覆盖div */
right: -6rpx;
top: 10rpx;
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f3b46ae0121d2a30666826fb3dd1fd98.png)