css实现四角边框效果介绍

1

2

3

4

5

6

7

8

<div

         class="box"

         v-for="(item, index) in coldBaseInfo.stationModelList"

         :key="index"

       >

         <div class="boxleft">

           <img :src="photo[index]" alt="Image" />

         </div>

1

2

3

4

5

6

photo: [

      require("@/assets/img/bigscreen/two.jpg"),

      require("@/assets/img/bigscreen/four.png"),

      require("@/assets/img/bigscreen/five.jpg"),

      require("@/assets/img/bigscreen/ten.jpg"),

    ],

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.boxleft {

  background: linear-gradient(to left, #04C886, #04C886) left top no-repeat,

        linear-gradient(to bottom, #04C886, #04C886) left top no-repeat,

        linear-gradient(to left, #04C886, #04C886) right top no-repeat,

        linear-gradient(to bottom, #04C886, #04C886) right top no-repeat,

        linear-gradient(to left, #04C886, #04C886) left bottom no-repeat,

        linear-gradient(to bottom, #04C886, #04C886) left bottom no-repeat,

        linear-gradient(to left, #04C886, #04C886) right bottom no-repeat,

        linear-gradient(to left, #04C886, #04C886) right bottom no-repeat;

    background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;

  img {

    width: 100%;

    height: 100%;

    padding: 4px;

    border: 2px solid #7fb1c580;

  }

}