一、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 {
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 {
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>