css 圆形渐变边框以及 居中布局

圆形渐变边框

 

<template>
  <div class="wrapper">
    <div class="box gradient-border">炫酷渐变边框</div>
  </div>
</template>
<script>
export default {
  name: "Table",
  components: {},
  data() {
    return {};
  },
  methods: {
    jsFun() {
      console.log(1);
    },
  },
  mounted() {
    this.jsFun();
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  margin: 20px;
}

.gradient-border {
  border: solid 5px transparent;
  border-radius: 10px;
  background-image: linear-gradient(white, white),
    linear-gradient(315deg, #833ab4, #fd1d1d 50%, #fcb045);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.box {
  width: 350px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content