CSS绘制虚线的方案

CSS绘制虚线的方案一、实现效果👀二、代码实现🤖<divclass="line"></div>.line{width:1px;/*虚线宽度*/background-image:linear-gradient(tobot

大家好,欢迎来到IT知识分享网。

一、实现效果👀

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>

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/30312.html

(0)
上一篇 2023-10-18 14:00
下一篇 2023-10-18 16:15

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信