问使用某些点之间的间隙实现CSS边框
EN

Stack Overflow用户

提问于 2019-06-11 04:58:31

回答 2查看 69关注 0票数 0

我希望能够使用像我包含的代码片段这样的东西。我的问题是，如果不使用透明度，我实际上无法掩盖边界之间的差距……这是一个问题，因为我想让这个盒子经过一幅图像。当然还有更好的方法。有谁有什么想法吗？

理想情况下，有一些方法可以在不使用透明度的情况下实际省略边界中的这些部分，因此它们根本不存在。我已经挖了几个小时了，似乎找不到解决方案。有谁有什么想法吗？

div {
	background: transparent;
  color: transparent;
	padding: 2rem;
	position: relative;
	width: 200px;
	height: 200px;
	margin: 3em auto;
	border: dashed 2px #BEBEBE;
}

div::before,
div::after {
	position: absolute;
	background: white;
	content: '';
	z-index: 1;
}

div::before {
	width: 70px;
	left: calc(50% - 35px);
	height: calc(100%);
	top: -2px;
}

div::after {
	height: 35px;
	left: -2px;
	width: calc(100%);
	top: calc(50% - 15px);
}

div>* {
	position: relative;
	z-index: 2;
}

<div>

</div>

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-11 08:07:08

使用多个背景来实现，如下所示：

div.box {
  padding: 2rem;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 3em auto;
  
  background:
  /* Top (two lines)*/
    repeating-linear-gradient(90deg, #BEBEBE 0 4px,transparent 4px 8px) top left/40% 2px,
    repeating-linear-gradient(90deg, #BEBEBE 0 4px,transparent 4px 8px) top right/40% 2px,
  /* Left (two lines)*/
    repeating-linear-gradient(0deg, #BEBEBE 0 4px,transparent 4px 8px) top left/2px 40%,
    repeating-linear-gradient(0deg, #BEBEBE 0 4px,transparent 4px 8px) bottom left/2px 40%,
    /* Bottom */
    repeating-linear-gradient(90deg,#BEBEBE 0 4px,transparent 4px 8px) bottom/100% 2px,
    /*Right*/
    repeating-linear-gradient(0deg,#BEBEBE 0 4px,transparent 4px 8px) right/2px 100%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

可以使用CSS变量进行优化：

div.box {
  --c:#BEBEBE; /* Color */
  --t:2px;     /* Thickness*/
  --d:4px;     /* length of dashes */
  --h:50px;    /* size of the hole*/

  padding: 2rem;
  position: relative;
  width: 150px;
  height: 150px;
  display:inline-block;
  margin: 1em;
  --g:var(--c) 0 var(--d),transparent var(--d) calc(2*var(--d));
  background:
    /* Top (two lines)*/
    repeating-linear-gradient(90deg ,var(--g)) top left /calc(50% - var(--h)/2) var(--t),
    repeating-linear-gradient(-90deg,var(--g)) top right/calc(50% - var(--h)/2) var(--t),
    /* Left (two lines)*/
    repeating-linear-gradient(180deg,var(--g)) top    left/var(--t) calc(50% - var(--h)/2),
    repeating-linear-gradient(0deg  ,var(--g)) bottom left/var(--t) calc(50% - var(--h)/2),
    /* Bottom */
    repeating-linear-gradient(90deg,var(--g)) bottom/100% var(--t),
    /*Right*/
    repeating-linear-gradient(0deg ,var(--g)) right /var(--t) 100%;
  background-repeat:no-repeat;
}

<div class="box">

</div>

<div class="box" style="--c:red;--t:4px;--h:90px;--d:8px;">

</div>

票数 1

Stack Overflow用户

发布于 2019-06-11 11:55:51

也许是SVG

svg {
  display: block;
  width: 200px;
  margin: 1em auto;
}

path {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-dasharray: 5 5;
}

<svg viewbox="0 0 100 100">
  <path d="M5,5
           L40,5 
           M60,5 
           L95,5
           L95,95
           L5,95
           L5,60
           M5,40
           L5,5
           "
        
        />
  
</svg>