To achieve the following effects
In the development, to achieve the following effects, I believe that everyone will think of using positioning at first sight, and just position the four borders directly.
At the beginning, I also used the positioning directly, and encapsulated it into a component. There was a problem with the layout later, and it was very troublesome when it was arranged. Sorry, it is not easy to control the position adjustment, and because it needs to be self-adaptive, it is very difficult to do. After thinking about it for a long time, I feel that it can be done with the background attribute of css, so that all these problems can be avoided.
Directly upload the code
to this html file, you can copy it and see it directly
<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>
Of course, my project is Vue, which is directly packaged into a style component, using Vue's <slot />tags and slots. You can use it however you want, happy.
component code
<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>
Pay attention to the css preprocessor, don't report an error! ! ! Hope to help everyone!
As for how to use components, uh, I don't think there is any need to talk about it.
The personal level is limited. If you have any questions, please leave a message for guidance. It is only for learning and reference.
There is no limit to learning! Work hard, encourage each other!