css实现边框图片 + 裁剪

border-image 边框图片：

	<view class="category">服务项目</view>
	<style lang="scss">
		.category {
			display: inline-block;
			font-size: 26rpx;
			border: 12rpx solid;
			padding: 0 10rpx;
			border-image: url(@/static/images/category.png) 22 round;
		}
	</style>

clip-path 裁剪：

		<view class="detail">
			<view class="por">
				<!-- 信息 -->
				<view class="item-head">
					<view class="left">
						<view class="user-img">
							<view class="bor">
								<image class="img" src="@/static/images/list.jpg"></image>
							</view>
						</view>
						<view class="badge">
							<image class="badge-img" src="@/static/images/badge.png"></image>
							<text>123</text>
						</view>
					</view>
					<view class="right">
						<view class="right-head">
							<text class="name">张三</text>
							<image class="img" src="@/static/images/sex-g.png"></image>
							<text>男</text>
							<text class="mar">22岁</text>

						</view>
						<view class="right-middle">
							<view class="middle-l">
								<image class="img" src="@/static/images/stars.png"></image>
								<text>5.0</text>
								<text class="line">|</text>
								<text>月接26单</text>
							</view>
							<view class="middle-r">
								<image class="img" src="@/static/images/location.png"></image>
								<text>小于1km</text>
							</view>

						</view>
						<view class="label-list">
							<view class="label" v-for="(item, index) in 4">test</view>
						</view>
					</view>
				</view>
				<!-- 介绍 -->
				<view class="introduce">
					个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍。
				</view>
			</view>
		</view>

<style lang="scss">

	.detail {

		margin: 20rpx;
		border-radius: 100rpx 16rpx 16rpx 16rpx;
		position: relative;
		font-size: 20rpx;
		overflow: hidden;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #F5BBEC;
			clip-path: polygon(180rpx 0, 100% 0, 100% 100%, 0 100%, 0 180rpx, 180rpx 180rpx);
		}

		&:last-child {
			margin-bottom: 0;
		}

		.por {
			position: relative;
			z-index: 1;
		}

		.item-head {
			z-index: 1;
			display: flex;
			align-items: center;

			.left {
				flex: 0 0 180rpx;
				border-radius: 50% 0 0 0;
				overflow: hidden;

				.user-img {
					width: 170rpx;
					height: 170rpx;
					border-radius: 50%;
					overflow: hidden;
					box-sizing: border-box;
					padding: 5rpx;
					box-shadow: 0 0 0 50rpx #F5BBEC;
					// box-shadow: 0 0 0 800rpx #F5BBEC; // 更高效方法 最新
					.bor {
						border: 4rpx solid #fff;
						height: calc(100% - 8rpx);
						border-radius: 50%;
						overflow: hidden;

						.img {
							width: 100%;
							height: 100%;
						}
					}

				}

				.badge {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					transform: translateY(-28rpx);
					width: 130rpx;
					height: 34rpx;
					background: #FFFFFF;
					border: 1px solid #FFD904;
					border-radius: 17rpx;
					color: #FFDA04;
					font-weight: 400;
					position: relative;

					.badge-img {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.right {
				width: 100%;
				padding: 0 28rpx 0 8rpx;

				.right-head {
					.name {
						font-size: 24rpx;
					}

					.img {
						width: 21rpx;
						height: 21rpx;
						margin: 0 7rpx 0 12rpx;
					}

					.mar {
						margin-left: 17rpx;
					}
				}

				.right-middle {
					margin: 16rpx 0;
					display: flex;
					justify-content: space-between;

					.middle-l {
						display: flex;
						align-items: center;

						.img {
							width: 22rpx;
							height: 21rpx;
							margin-right: 8rpx;
						}

						.line {
							padding: 0 16rpx;
						}
					}

					.middle-r {
						display: flex;
						align-items: center;

						.img {
							width: 20rpx;
							height: 23rpx;
							margin-right: 9rpx;
						}
					}
				}

				.label-list {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-row-gap: 16rpx;
					grid-column-gap: 16rpx;

					.label {
						padding: 5rpx 8rpx;
						text-align: center;
						background: #FFFFFF;
						border-radius: 10rpx;
					}
				}
			}
		}

		.introduce {
			padding: 0 28rpx 28rpx 28rpx;
			line-height: 36rpx;
		}

	}
</style>