You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.0 KiB
49 lines
1.0 KiB
2 years ago
|
<template>
|
||
|
|
<div class='BorderRadiusImage' :style="{ borderRadius, '--border-width': borderWidth, '--border-color': borderColor }">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'BorderRadiusImage',
|
||
|
|
props: {
|
||
|
|
borderRadius: {
|
||
|
|
type: String,
|
||
|
|
default: "0px"
|
||
|
|
},
|
||
|
|
borderWidth: {
|
||
|
|
type: String,
|
||
|
|
default: "2px"
|
||
|
|
},
|
||
|
|
borderColor: {
|
||
|
|
type: String,
|
||
|
|
default: "rgba(0,0,0,0)"
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.BorderRadiusImage {
|
||
|
|
position: relative;
|
||
|
|
background-clip: padding-box !important;
|
||
|
|
margin: calc(var(--border-width) / 2);
|
||
|
|
overflow: visible !important;
|
||
|
|
;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
top: calc(var(--border-width) / -2);
|
||
|
|
left: calc(var(--border-width) / -2);
|
||
|
|
width: calc(100% + var(--border-width));
|
||
|
|
height: calc(100% + var(--border-width));
|
||
|
|
border-radius: inherit;
|
||
|
|
// background: var(--border-color);
|
||
|
|
background: linear-gradient(360deg, rgba(55, 231, 255, .3), rgba(55, 231, 255, 0));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|