/* ==================
          边框 line为伪元素
 ==================== */

 .border-red::after {
	border-color: var(--red);
}

.border-orange::after {
	border-color: var(--orange);
}

.border-yellow::after {
	border-color: var(--yellow);
}

.border-olive::after {
	border-color: var(--olive);
}

.border-green::after {
	border-color: var(--green);
}

.border-darkgreen::after {
	border-color: var(--darkgreen);
}
 
.border-cyan::after {
	border-color: var(--cyan);
}

.border-blue::after {
	border-color: var(--blue);
}

.border-purple::after {
	border-color: var(--purple);
}

.border-mauve::after {
	border-color: var(--mauve);
}

.border-pink::after {
	border-color: var(--pink);
}

.border-brown::after {
	border-color: var(--brown);
}

.border-grey::after {
	border-color: var(--grey);
}

.border-gray::after {
	border-color: var(--gray);
}

.border-black::after {
	border-color: var(--black);
}

.border-white::after {
	border-color: var(--white);
}



/* ==================
          边框
 ==================== */

/* -- 实线 -- */

.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left,
.solid-bold,
.solid-bold-top,
.solid-bold-right,
.solid-bold-bottom,
.solid-bold-left {
	position: relative;
}

.solid::after,
.solid-top::after,
.solid-right::after,
.solid-bottom::after,
.solid-left::after,
.solid-bold::after,
.solid-bold-top::after,
.solid-bold-right::after,
.solid-bold-bottom::after,
.solid-bold-left::after {
	content: " ";
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: inherit;
	transform: scale(0.5);
	transform-origin: 0 0;
	pointer-events: none;
	box-sizing: border-box;
}

.solid::after {
	border: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-top::after {
	border-top: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-right::after {
	border-right: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-bottom::after {
	border-bottom: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-left::after {
	border-left: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-bold::after {
	border: 8rpx solid #eee;
}

.solid-bold-top::after {
	border-top: 8rpx solid #eee;
}

.solid-bold-right::after {
	border-right: 8rpx solid #eee;
}

.solid-bold-bottom::after {
	border-bottom: 8rpx solid #eee;
}

.solid-bold-left::after {
	border-left: 8rpx solid #eee;
}