我可以有两个相邻的边界相交吗？ [英] can I have two adjacent borders intersect each other?

问题描述

代码很简单：

<div class="top" style="background:green";>
    <div class="inner" style="border: 1px solid white;"></div>
</div>

内部div具有透明背景，因此一旦定义边框，您只能看到边框。
我正在尝试使内部div的右和角边界相交，就像这样：

The inner div has a transparent background so you can only see the border once I define it. I'm trying to have the right and corner border of the inner div intersect, like so:

目标是在所有四个角上都具有该交点。

The goal is to have that intersection on all four corners.

推荐答案

您可以使用 linear-gradient 并且只需要一个元素：

You can use linear-gradient and you only need one element:

.box {
  margin:30px;
  width:100px;
  height:100px;
  padding:10px;
  background:
   linear-gradient(#fff,#fff) 10px 0,
   linear-gradient(#fff,#fff) 0 10px,
   linear-gradient(#fff,#fff) calc(100% - 10px) 0,
   linear-gradient(#fff,#fff) 0 calc(100% - 10px);
   
 background-size:1px 100%,100% 1px;
 background-repeat:no-repeat;
}

body {
 background:green;
}

<div class="box">

</div>

您还可以依靠CSS变量轻松控制交点：

You can also rely on CSS variable to easily control the intersection:

.box {
  margin:20px;
  width:100px;
  height:100px;
  padding:var(--c,10px);
  background:
   linear-gradient(#fff,#fff) var(--c,10px) 0,
   linear-gradient(#fff,#fff) 0 var(--c,10px),
   linear-gradient(#fff,#fff) calc(100% - var(--c,10px)) 0,
   linear-gradient(#fff,#fff) 0 calc(100% - var(--c,10px));
   
 background-size:1px 100%,100% 1px;
 background-repeat:no-repeat;
 
 display:inline-block;
 box-sizing:border-box;
}

body {
 background:green;
}

<div class="box">
</div>
<div class="box" style="--c:20px;">
</div>
<div class="box" style="--c:0px;">
</div>
<div class="box" style="--c:40px;">
</div>

具有不同语法的相同逻辑：

Same logic with a different syntax:

.box {
  margin:20px;
  width:100px;
  height:100px;
  padding:var(--c,10px);
  background:
   linear-gradient(#fff,#fff) left,
   linear-gradient(#fff,#fff) top,
   linear-gradient(#fff,#fff) right,
   linear-gradient(#fff,#fff) bottom;
   
 background-size:1px 100vh,100vw 1px;
 background-origin:content-box;
 background-repeat:no-repeat;
 
 display:inline-block;
 box-sizing:border-box;
}

body {
 background:green;
}

<div class="box">
</div>
<div class="box" style="--c:20px;">
</div>
<div class="box" style="--c:0px;">
</div>
<div class="box" style="--c:40px;">
</div>

这篇关于我可以有两个相邻的边界相交吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！