需求：在做大屏数据时经常会看到那些四角边框

效果图：

?分析：

1.先画出整个大边框

2.然后用::before和::after分别画出两对边框覆盖大边框的上下左右四边，只留下四个角

实现（示例代码）：

<template> <div class="box"> <div class="border_item"></div> </div> </template> <script> export default { name: "border", data() { return {}; }, methods: {}, }; </script> <style lang="less" scoped> .box { width: 100%; height: 750px; background-color: #040d32; } .border_item { position: relative; width: 400px; height: 300px; margin: 300px auto; background: rgba(1, 19, 67, 0.8); border: 2px solid #00a1ff; border-radius: 8px; } .border_item::before { position: absolute; content: ""; top: -2px; bottom: -2px; left: 30px; width: calc(100% - 60px); border-top: 2px solid #016886; border-bottom: 2px solid #016886; z-index: 0; } .border_item::after { position: absolute; content: ""; top: 30px; right: -2px; left: -2px; height: calc(100% - 60px); border-right: 2px solid #016886; border-left: 2px solid #016886; z-index: 0; } </style>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。