CSS绘制虚线的方案
2023/5/6 18:22:07
本文主要是介绍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绘制虚线的方案的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南