CSS لتحقيق تأثير الحدود الرباعية

 <div
            فئة = "مربع"
            v-for = "(العنصر، الفهرس) في ColdBaseInfo.stationModelList"
            :مفتاح = "الفهرس"
          >
            <div class="boxleft">
              <img :src="photo[index]" alt="Image" />
            </div>

 صورة: [
        يتطلب("@/assets/img/bigscreen/two.jpg"),
        تتطلب ("@/assets/img/bigscreen/four.png")،
        تتطلب("@/assets/img/bigscreen/five.jpg"),
        تتطلب ("@/assets/img/bigscreen/ten.jpg")،
      ]،

 .بوكس يسار {
  الخلفية: تدرج خطي (إلى اليسار، #04C886، #04C886) أعلى اليسار بدون تكرار،
        التدرج الخطي (إلى الأسفل، #04C886، #04C886) أعلى اليسار بدون تكرار،
        التدرج الخطي (إلى اليسار، #04C886، #04C886) أعلى اليمين بدون تكرار،
        التدرج الخطي (إلى الأسفل، #04C886، #04C886) أعلى اليمين بدون تكرار،
        التدرج الخطي (إلى اليسار، #04C886، #04C886) أسفل اليسار بدون تكرار،
        التدرج الخطي (إلى الأسفل، #04C886، #04C886) الجزء السفلي الأيسر بدون تكرار،
        التدرج الخطي (إلى اليسار، #04C886، #04C886) أسفل اليمين بدون تكرار،
        التدرج الخطي (إلى اليسار، #04C886، #04C886) أسفل اليمين بدون تكرار؛
    حجم الخلفية: 2 بكسل 10 بكسل، 10 بكسل 2 بكسل، 2 بكسل 10 بكسل، 10 بكسل 2 بكسل؛
  إم جي {
    العرض: 100%؛
    الارتفاع: 100%؛
    الحشو: 4 بكسل؛
    الحد: 2 بكسل صلب #7fb1c580؛
  } 
}