CSS绘制虚线的方案

一、实现效果

二、代码实现

<div class="line"></div>

.line {

    width: 1px;   /* 虚线宽度 */

    background-image: linear-gradient(to bottom, #78FBCE 0%, #78FBCE 80%, transparent 50%);

    background-size: 2px 12px;   /* 虚线点间隔距离和虚线点长度 */

    background-repeat: repeat-y;

    transform: rotate(-45deg);  /* 虚线倾斜角度 */

}

你还可以加上定位属性去调整线条位置等等。至此，线条效果就是实现啦！

三、封装：Vue3.0中组件封装

1、组件封装：

// DotLine.vue组件
<template>

    <div class="line" :style="`

            height: ${long};

            transform: rotate(${rotate}deg);

            left:${left} ;

            right: ${right};

            top:${top};

            bottom:${bottom};`

        ">

    </div>

</template>


<script setup lang="ts">

defineProps({

    /**虚线长度 */

    long: {

        type: String,

        default: "100px"

    },

    /** 虚线倾斜角度*/

    rotate: {

        type: Number,

        default: -45

    },

    /**虚线距离容器左边定位 */

    left: {

        type: String,

        default: ""

    },

    /** 虚线距离容器右边定位*/

    right: {

        type: String,

        default: ""

    },

    /** 虚线距离容器顶部定位*/

    top: {

        type: String,

        default: ""

    },

    /** 虚线距离容器底部定位*/

    bottom: {

        type: String,

        default: ""

    }

})


</script>

<style scoped>

.line {

    width: 1px;

    background-image: linear-gradient(to bottom, #78FBCE 0%, #78FBCE 80%, transparent 50%);

    background-size: 2px 12px;

    background-repeat: repeat-y;

    position: absolute;

    transform: rotate(-45deg);

}


</style>

2、组件使用：

<DotLine long="88.4137px" :rotate=-45 left="223px" top="200px"></DotLine>

以上就完成啦！欢迎大佬提出改进意见，或者其他的优质方案哦~

CSS绘制虚线的方案的相关教程结束。