css mask文字渐变+clip-path裁剪路径+border-image图片边框

一、mask

<template>
  <div>
    <div class="textGradient" data-text="这是一段中文">这是一段中文</div>
  </div>
</template>

<script>
  export default {
    name: "a9"
  }
</script>

<style scoped>
  .textGradient {
    position: relative;
    color: red;
  }

  .textGradient:after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: green;
    mask: linear-gradient(to right, #000000, transparent);
  }
</style>

二、clip-path

<template>
  <div>
    <div class="blockClipPath"></div>
  </div>
</template>

<script>
  export default {
    name: "a9"
  }
</script>

<style scoped>
  .blockClipPath {
    width: 200px;
    height: 200px;
    background-color: red;
    clip-path: circle(100px at 100px 200px);
  }
</style>

三、border-image

<template>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400" style="display: block">
      <defs>
        <clipPath id="svgClipPath">
          <path :d="clipPath"/>
        </clipPath>
      </defs>
      <path :d="clipPath"/>
    </svg>
    <div class="clipPathSty"></div>
  </div>
</template>

<script>
  export default {
    name: "a9",
    data() {
      return {
        clipdeg: 45
      }
    },
    computed: {
      clipPath() {
        let mathclipdeg = (Math.PI / 180) * this.clipdeg
        return `M400 200,A200 200 0 0 0 ${200 + Math.round(Math.cos(mathclipdeg) * 200)} ${200 - Math.round(Math.sin(mathclipdeg) * 200)},L200 200,Z`
      }
    }
  }
</script>

<style scoped>
  .clipPathSty {
    width: 400px;
    height: 400px;
    background-color: red;
    clip-path: url("#svgClipPath");
    /*参数1为九宫格图片路径，参数2和参数3表示几个像素点（为九宫格图片宽高的1/3，不能带单位），参数4表示拉伸*/
    /*border-image: url("") 8 8 stretch;*/
  }

  path {
    fill: green;
  }
</style>