<template>
	<div class="split-vline"></div>
</template>

<script>
export default {
	name: 'SplitVline'
}
</script>

<style lang="scss" scoped>
//split-vline
$--background-split-vline: linear-gradient(
	180deg,
	rgb(215 215 215 / 25%) 0%,
	rgb(185 185 185 / 74%) 49%,
	rgb(199 199 199 / 25%) 99%
);

.split-vline {
	background-image: $--background-split-vline;
	display: inline-block;
	height: 14px;
	width: 1px;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

 

分享一个分割竖线的效果vue组件_系统