我的意思是,线条长度10px
时间: 2024-03-17 19:43:58 浏览: 19
如果要将线条长度缩短为10px,可以将`.item`的样式中的`height`属性改为`10px`,并且将`.circle`的`border-radius`属性改为`calc(50% - 5px)`,同时将`.item`的样式中的`left`属性改为`50%`,再加上`transform: translate(-50%, -50%);`,即可将线条缩短为10px并居中显示,修改后的代码如下所示:
```html
<template>
<div class="circle">
<div v-for="item in 50" class="item" :style="{ transform: `rotate(${item * 3.6}deg)` }"></div>
<div class="top"></div>
</div>
</template>
<style lang="less">
.circle {
position: relative;
width: 86%;
height: 86%;
left: 7%;
top: 7%;
border-radius: calc(50% - 5px);
.top {
position: absolute;
width: 100%;
height: 100%;
left: 5%;
top: 5%;
border-radius: 50%;
background-color: rgba(255, 255, 255);
}
.item {
width: 100%;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
</style>
```