在div的大綱中休息一下-有解無憂

我的 div 周圍有一個輪廓，我想在右邊框上休息一下

在 div 的大綱中休息一下

.customer-box-shadow {
  outline: 2px solid red;
}

<div class="customer-box-shadow">
  CONTENT
</div>

uj5u.com熱心網友回復：

使用蒙版，你也會有透明度。我用內部陰影替換了輪廓

.customer-box-shadow {
  box-shadow: 0 0 0 2px inset red; /* you can also use border */
  padding:50px;
  -webkit-mask:
     /* adjust the 60% to control the height of the cut */
    linear-gradient(#000 0 0) right/2px 60% no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}


body {
  background:linear-gradient(90deg,#ccc,#fff)
}

<div class="customer-box-shadow">
  CONTENT
</div>

如果您想繼續使用大綱，請考慮 clip-path

.customer-box-shadow {
  --d: 2px; /* outline border */
  --c: 60%; /* the cut */
  outline: var(--d) solid red;
  padding:50px;
  clip-path:
   polygon(calc(-1*var(--d)) calc(-1*var(--d)),
          calc(100%   var(--d)) calc(-1*var(--d)),
          calc(100%   var(--d)) calc(50% - var(--c)/2),
          100% calc(50% - var(--c)/2),
          100% calc(50%   var(--c)/2),
          calc(100%   var(--d)) calc(50%   var(--c)/2),
          calc(100%   var(--d)) calc(100%   var(--d)),
          calc(-1*var(--d)) calc(100%   var(--d)))
}


body {
  background:linear-gradient(90deg,#ccc,#fff)
}

<div class="customer-box-shadow">
  CONTENT
</div>

uj5u.com熱心網友回復：

用另一個 div 隱藏邊框，如下所示：

.bordered{
  display: block;
  width: 100px;
  height: 100px;
  border: 1px gray solid;
  position: relative;
}

.overlay{
  width: 25px;
  height: 25px;
  position: absolute;
  right: -12.5px;
  top: calc(50% - 12.5px);
  background: #fff;
}

<div class="bordered">
  content ...
  <div class="overlay"></div>
</div>

uj5u.com熱心網友回復：

遺憾的是，右邊的遮陽篷被洗掉了，只剩下 connexo 的復制粘貼。所以我重新發布了 awnser 對我來說它適用于：after

.customer-box-shadow {
  outline: 2px solid $red;
  position:relative;
  &:after{
  content:'';
  height:150px;
  width:2px;
  background:white;
  position:absolute;
  right:-2px;
  top:60px;
  bottom:0;
  margin:auto;
 }
}

uj5u.com熱心網友回復：

無需更改標記。使用偽元素 ::after覆寫輪廓中不需要的部分：

.customer-box-shadow{
  display: block;
  width: 100px;
  height: 100px;
  outline: 2px solid red;
  position: relative;
}

.customer-box-shadow::after {
  background-color: white;
  content: "";
  bottom: 30px; /* you might want a percentage here */
  right: -2px;
  width: 2px;
  top: 30px; /* you might want a percentage here */
  position: absolute;
}

<div class="customer-box-shadow">
  content ...
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421155.html

標籤：

上一篇：模式內的垂直選項卡在不同的瀏覽器中未正確顯示

下一篇：懸停時導航欄背景顏色