SVG 渐变边框在 CSS 中的应用
<template>
<div class="home">
<div class="one">
<svg width="100%" height="100%">
<rect x="2" y="2" width="100%" height="100%" fill="none"
style="width: calc(100% - 4px);height: calc(100% - 4px);" rx="4" stroke="url(#paint0_linear_1_2)"
stroke-width="4" stroke-linecap="round" />
<defs>
<linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="1" y2="0">
<stop stop-color="#FFD75A" />
<stop offset="1" stop-color="#ED424B" />
</linearGradient>
</defs>
</svg>
</div>
<div class="one">
<svg width="100%" height="100%" viewBox="0 0 100% 100%" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" rx="4" stroke="url(#paint0_linear_1_2)" stroke-linecap="round" />
<defs>
<linearGradient id="paint0_linear_1_2" x1="0" y1="0" x2="1" y2="0">
<stop stop-color="#FFD75A" />
<stop offset="1" stop-color="#ED424B" />
</linearGradient>
</defs>
</svg>
</div>
<div class="one">
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="100%" height="100%" style="width: calc(100% - 4px);height: calc(100% - 4px);"
stroke-width="2" rx="16" stroke-linecap="round" stroke="url(#paint0_linear_3269_5233)"
stroke-dasharray="8 6" />
<defs>
<linearGradient id="paint0_linear_3269_5233" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFD75A" />
<stop offset="1" stop-color="#ED424B" />
</linearGradient>
</defs>
</svg>
</div>
<div class="one">
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="rect" x="2" y="2" width="100%" height="100%" stroke-width="2" rx="16" stroke-linecap="round"
stroke="url(#paint0_linear_5234_3269)" stroke-dasharray="8 6" />
<defs>
<linearGradient id="paint0_linear_5234_3269" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse">
<stop stop-color="#00bbff" />
<stop offset="1" stop-color="red" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
}
},
}
</script>
<style scoped>
.home {
width: 100%;
height: 100%;
}
.one {
width: 100px;
height: 80px;
display: inline-block;
margin: 0 10px;
}
.rect {
width: calc(100% - 4px);
height: calc(100% - 4px);
animation: move .3s infinite linear;
}
@keyframes move {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 14;
}
}
</style>