component-传入值圆形百分比展示,.background-image: conic-gradient()

1.效果

2.代码

<template>
     <div class="circle" :style="{ 'background-image': `conic-gradient(#3498db 0 ${fillPercentage}%, transparent ${fillPercentage}% 100%)` }"></div> <!-- 使用动态绑定样式来设置填充效果 -->
</template>
<script>
 data() {
    return {
	  fillPercentage: 25, // 设置默认填充百分比为75%
}
}
</script>
<style>
    .circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
</style>

数据属性fillPercentage来控制圆形的占比显示，默认值为75%。在圆形元素的样式中，使用动态绑定:style来设置background-image属性，根据fillPercentage的值动态调整填充效果。

3.background-image: conic-gradient()

  background-image: conic-gradient是CSS中的一个属性，用于设置元素的背景图像为圆锥渐变效果。通过使用conic-gradient函数作为背景图像，可以创建具有圆锥渐变色彩的视觉效果。语法如下：

background-image: conic-gradient(<angle> || to <side-or-corner>, <color-stop-list>);

其中：

• <angle>：指定渐变的起始角度。
• to <side-or-corner>：指定渐变的方向，可以是to top, to right, to bottom, to left, to top right, to top left, to bottom right, to bottom left等。
• <color-stop-list>：定义了颜色和位置的列表，类似于线性渐变中的<color-stop>。

.element {
    background-image: conic-gradient(#3498db 0% 30%, transparent 30% 100%);
}

 示例代码表示将.element元素的背景图像设置为从蓝色到透明的圆锥渐变效果，在0%到30%之间为蓝色，30%到100%之间为透明。根据需要调整颜色和位置来创建不同样式的圆锥渐变背景。