CSS技巧：如何让右边界带有渐变色和圆角边框分割线

分割线 代码

  .data-item:first-of-type {
    border-right: 2px solid;
    border-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(81, 110, 197, 0.76) 50%,
        rgba(0, 0, 0, 0.1) 100%
      )
      1;
    padding: 15px 0;
  }

四角边框样式 代码

.chart-box {
  cursor: pointer;
  background: linear-gradient(to left, #03a9f3, #03a9f3) left top no-repeat,
    linear-gradient(to bottom, #03a9f3, #03a9f3) left top no-repeat,
    linear-gradient(to left, #03a9f3, #03a9f3) right top no-repeat,
    linear-gradient(to bottom, #03a9f3, #03a9f3) right top no-repeat,
    linear-gradient(to left, #03a9f3, #03a9f3) left bottom no-repeat,
    linear-gradient(to bottom, #03a9f3, #03a9f3) left bottom no-repeat,
    linear-gradient(to left, #03a9f3, #03a9f3) right bottom no-repeat,
    linear-gradient(to left, #03a9f3, #03a9f3) right bottom no-repeat;
  background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
  transition: all 0.4s ease;
  border: 1px solid transparent;
  position: absolute;
  left: 0px;
  top: 10px;
}

.chart-box:hover {
  border: 1px solid #357bc6;
}