css实现图片自动渐变切换、element-plus 的修改el-table的（边框线为虚线、表头样式）

本文链接：https://blog.csdn.net/ZDM_9999/article/details/128529261

首先放几张图片

<div id="slideshow">
      <img src="@/assets/banner-one.png" alt="Slideshow Image 1" class="image1 active" />
      <img src="@/assets/banner-two.jpg" alt="Slideshow Image 2" class="image2" />
      <img src="@/assets/banner-three.jpg" alt="Slideshow Image 3" class="image3" />
 </div>

#slideshow {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
}
.image1,
.image2,
.image3 {
  width: 100%;
  height: 100%;
  position: fixed;
}
.image1 {
  /* opacity: 1; */
  animation: image1 15s linear 0s infinite normal both running;
}
@keyframes image1 {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.image2 {
  /* opacity: 1; */
  animation: image2 15s linear 0s infinite normal both running;
}
@keyframes image2 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.image3 {
  /* opacity: 1; */
  animation: image3 15s linear 0s infinite normal both running;
}
@keyframes image3 {
  0% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

修改el-table的（边框线为虚线、表头样式）

<el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#f4f7fc',color:'#555555',borderColor:'#e8e8e8'}"
        :cell-style="{borderBottom:'1px dashed #e8e8e8'}"
        class="briefChapter"
      >
 </el-table>