CSS绘制虚线的方案

2023/5/6 18:22:07

编程Tag： Web前端

本文主要是介绍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绘制虚线的方案的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！