主页 / 问题 / 816496
Accepted
Isaev
Asked:2020-04-19 22:19:18 +0000 UTC2020-04-19 22:19:18 +0000 UTC

如何在相交元素周围制作一般边框？

  • 772

当多个带有框架的容器相互重叠时，是否可以将框架仅留在所有边缘而不进入内部？（如何通过 ORing 将它们放在彼此之上来制作一个区域，这将有一个边框）

body{
  background-color: #ddd;
}

div{
  border-color: black;
  border-width: 1px;
  border-style: solid;
  position: fixed;
  float: left;
  width: 100px;
  height: 100px;
  padding: 10px;  
}

#div1{
  left: 20px;
  top: 20px;
  border-radius: 0 10px 10px 10px;
  background-color:  LightCoral;
}

#div2{
  left: 70px;
  top: 70px;
  border-radius: 10px 10px 0 10px;
  background-color: LightSalmon;
}
<div id='div1'>
</div>
<div id='div2'>
</div>

html

1 个回答

  1. Best Answer

    可以通过filter:drop-shadow(...);

    body{
  background-color: #ddd;
}

.b {
filter: drop-shadow(0 -1px 0 black) drop-shadow(0 1px 0 black) drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black);
}
div{

  position: fixed;
  float: left;
  width: 100px;
  height: 100px;
  padding: 10px;  
}

#div1{
  left: 20px;
  top: 20px;
  border-radius: 0 10px 10px 10px;
  background-color:  LightCoral;
}

#div2{
  left: 70px;
  top: 70px;
  border-radius: 10px 10px 0 10px;
  background-color: LightSalmon;
}
    <section class="b">
  <div id='div1'>
  </div>
  <div id='div2'>
  </div>
</section>

    • 2

相关问题