네 모서리 테두리 효과를 달성하는 CSS

 <div
            클래스="상자"
            v-for="(항목, 인덱스) in coldBaseInfo.stationModelList"
            :키="색인"
          >
            <div 클래스="박스왼쪽">
              <img :src="사진[색인]" alt="이미지" />
            </div>

 사진: [
        require("@/assets/img/bigscreen/two.jpg"),
        요구("@/assets/img/bigscreen/four.png"),
        require("@/assets/img/bigscreen/five.jpg"),
        require("@/assets/img/bigscreen/ten.jpg"),
      ],

 .boxleft {
  배경: 선형 그라데이션(왼쪽, #04C886, #04C886) 왼쪽 위 반복 없음,
        선형 그라데이션(하단으로, #04C886, #04C886) 왼쪽 상단 반복 없음,
        선형-그라디언트(왼쪽으로, #04C886, #04C886) 오른쪽 상단 반복 없음,
        선형-그라디언트(하단으로, #04C886, #04C886) 오른쪽 상단 반복 없음,
        선형-그라디언트(왼쪽으로, #04C886, #04C886) 왼쪽 아래 반복 없음,
        선형 그라데이션(하단으로, #04C886, #04C886) 왼쪽 하단 반복 없음,
        선형-그라디언트(왼쪽으로, #04C886, #04C886) 오른쪽 아래 반복 없음,
        선형 그라데이션(왼쪽으로, #04C886, #04C886) 오른쪽 아래 반복 없음;
    배경 크기: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
  img {
    너비: 100%;
    높이: 100%;
    패딩: 4px;
    테두리: 2px 솔리드 #7fb1c580;
  } 
}