complex-border.uvue

<template>
	<view style="flex-grow: 1;">
		<view>
			<text>圆角 : 各边之间 不同width && 不同颜色 && 不同圆角</text>
			<view
				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
				<view class="border-circle"></view>
			</view>
		</view>

		<view>
			<text>直角 : 各边之间 不同width && 不同颜色 </text>
			<view
				style="width: 500rpx;height: 500rpx;background-color: gray;justify-content: center;align-items: center;">
				<view class="border-rect"></view>
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style>
	.common {
		width: 500rpx;
		height: 500rpx;
		background-color: gray;
	}

	.border-circle {
		width: 250rpx;
		height: 250rpx;
		background-color: #00dd00;
		border-width: 20rpx;
    border-style: solid;
		border-color: #000000;
		border-bottom-width: 40rpx;
		border-bottom-color: #ff0000;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 30rpx;
		border-radius: 10rpx;
		border-right-color: #FFDC02;
	}

	.border-rect {
		width: 250rpx;
		height: 250rpx;
    border-style: solid;
		background-color: #00dd00;
		border-width: 20rpx;
		border-color: #000000;
		border-bottom-width: 40rpx;
		border-bottom-color: #ff0000;
		border-right-color: #FFDC02;
	}
</style>