css实现四边形四角边框效果（没有使用定位，避免布局影响）

实现下面这种效果
在这里插入图片描述
开发中要实现下面这种效果，相信大家第一眼就会想到用定位，直接把四个边框定位上去就好了。
最开始我也是直接用的定位，封装成了一个组件。后面布局的时候出问题了，排列的时候很麻烦，对不起，调位置什么的都不好控制，而且因为要做到自适应，很不好做。后面想了很久，感觉可以用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预处理器，别报错了！！！希望能够帮助到大家！
至于怎么使用组件，额，我想应该不需要再说了。

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

css实现四边形四角边框效果（没有使用定位，避免布局影响）

猜你喜欢