设置一个样式中间高度是10px到左右渐渐变成1px颜色也要从中间的省蓝刀左右的白色的分割线

要创建这样的效果，通常需要使用CSS渐变和伪元素来实现。这里是一个简单的示例，描述如何设置一个元素的边框，使其从中心开始向两侧逐渐改变高度和颜色：

/* 定义一个包含渐变的边框 */
.border-gradient {
  position: relative;
  height: 50px; /* 或者你需要的高度 */
  background-image: linear-gradient(to right, transparent calc(50% - 5px), white calc(50% + 5px));
  border-left: 10px solid #111; /* 中间的颜色 */
  border-right: 1px solid white; /* 右侧的颜色 */
}

/* 使用伪元素创建中间10px部分 */
.border-gradient::before,
.border-gradient::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 10px;
}

.border-50%);
  border-top: 10px solid #111;
}

.border-gradient::after {
  transform: translateY(-50%) translateX(50%);
  border-bottom: 1px solid white;
}

这个例子中，`.border-gradient`类设置了从透明到白色、宽度为整个元素宽度的水平渐变边框，同时有两个伪元素分别放在元素顶部和底部，用于展示10px的实色区域。