实现下面这种效果

在这里插入图片描述

 

开发中要实现下面这种效果，相信大家第一眼就会想到用定位，直接把四个边框定位上去就好了。
最开始我也是直接用的定位，封装成了一个组件。后面布局的时候出问题了，排列的时候很麻烦，对不起，调位置什么的都不好控制，而且因为要做到自适应，很不好做。后面想了很久，感觉可以用css的背景属性来做，这样的话这些问题全部都可以避免了。

直接上代码
这个html文件，可以复制直接看下


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .frame {
            display: inline-block;
            padding: 7px;
            background: linear-gradient(#00ffd4, #00ffd4) left top, linear-gradient(#00ffd4, #00ffd4) left top, linear-gradient(#00ffd4, #00ffd4) right top, linear-gradient(#00ffd4, #00ffd4) right top, linear-gradient(#00ffd4, #00ffd4) left bottom, linear-gradient(#00ffd4, #00ffd4) left bottom, linear-gradient(#00ffd4, #00ffd4) right bottom, linear-gradient(#00ffd4, #00ffd4) right bottom;
            background-repeat: no-repeat;
            background-size: 2px 20px, 20px 2px;
        }
        
        .frame-box {
            width: 200px;
            height: 200px;
            border: #00ffd4 1px solid;
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div class="frame">
        <div class="frame-box">
        </div>
    </div>
    <div class="frame">
        <div class="frame-box">
        </div>
    </div>
</body>

</html>

当然，我项目是vue的，直接封装成一个样式组件，利用vue的<slot />标签，插槽。就可以直接想怎么用就怎么用啦，开心。

组件代码

<template>
  <div class="frame">
    <div class="frame-box">
      <slot />
    </div>
  </div>
</template>

<script>
export default {

}

</script>

<style  lang="scss" scoped>
.frame {
  padding: 7px;
  background: linear-gradient(#00ffd4, #00ffd4) left top,
    linear-gradient(#00ffd4, #00ffd4) left top,
    linear-gradient(#00ffd4, #00ffd4) right top,
    linear-gradient(#00ffd4, #00ffd4) right top,
    linear-gradient(#00ffd4, #00ffd4) left bottom,
    linear-gradient(#00ffd4, #00ffd4) left bottom,
    linear-gradient(#00ffd4, #00ffd4) right bottom,
    linear-gradient(#00ffd4, #00ffd4) right bottom;
  background-repeat: no-repeat;
  background-size: 2px 20px, 20px 2px;
}
.frame-box {
  width: 100%;
  height: 100%;
  border: #00ffd4 1px solid;
  background: rgba(0, 0, 0, 0.6);
}
</style>

原文：css实现四边形四角边框效果（没有使用定位，避免布局影响）_五月闲云一野鹤的博客-CSDN博客

# css # html # css3
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

Handy 离线语音转写教程：免费开源，本地跑不连网

你肯定遇到过：语音输入 5 分钟，云转写服务要登录、要付费；或者出差没网，想口述一段会议纪要，发现全都没法用。Handy 离线语音转写工具就是为解决这个问题做的，声音全程不出你的电脑。## 🎯 这个工具是什么Handy 是一款免费、开源、跨平台（Windows / macOS / Linux）的离线语音转写应用。按住快捷键说话，松手后文字直接粘贴进任意输入框，全程不联网。核心能力就三条：

avatar 天工造物局

Supabase Edge Functions 编写与部署完整指南：Deno 运行时上的无服务器利器

Supabase Edge Functions 是基于 Deno 运行时编写、面向 Web 的无服务器函数服务，帮你把后端逻辑部署到全球边缘节点。作为 Postgres 开发平台的核心能力之一，它让你用 TypeScript 就能快速搭建低延迟的 API 端点、Webhook 接收器和 AI 集成服务，无需管理任何服务器。本文将从零带你完成一个 Edge Function 的创建、本地调试与全球部

avatar 天工造物局

celld从v0.1.0到v0.2.0为何不能滚动升级：两个破坏性变更详解

celld 是一个自托管、分布式的 Durable Objects 开源守护进程，它在你自己的机器上运行 Cloudflare Workers，每个对象对应一个独立的 SQLite 数据库，并持续复制到你自己拥有的 S3 兼容存储桶中。如果你正准备把 v0.1.0 的集群（fleet）升级到 v0.2.0，这篇文章必须先读：这次升级**不能滚动升级**，必须采用"先停光、再启动"的一次性发布方式。

avatar 天工造物局