<template>
  <div class="shadow-container">
    <slot />
  </div>
</template>
<script>
export default {
  name: "ShadowContainer",
};
</script>
<style lang="less" scoped>
.shadow-container {
  position: relative;
  border-radius: 10px;
  padding: 20px;
  border: 2px solid;
  background: linear-gradient(
    0deg,
    rgba(4, 79, 129, 0.1) 0%,
    rgba(15, 60, 89, 0.35) 28%,
    #0b2950 100%
  );
  border-image: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgba(7, 35, 65, 0.8),
      rgba(25, 85, 117, 0.8),
      rgba(15, 149, 212, 0.8)
    )
    2 2;
  clip-path: inset(0 round 5px); //裁剪
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}

.shadow-container::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: 2px;
  left: -2px;
  border-radius: 6px;
  border-top: 2px solid;
  border-color: rgba(15, 149, 212, 0.8);
  pointer-events: none;
}
</style>