CSS：分割框边框颜色

Question

我正在尝试构建一个盒子，我希望每一行/div 在中间完全透明，而在边缘不透明。 （在图片中，圈出的部分应该是透明的......）我写了这样的东西：

.box {
     height: 100px;
     width: 100px;
     border-left: solid green;
     border-right: solid green;
     border-top: solid red;
     border-bottom: solid red;
}

但是，当然，它没有给我想要的结果....我想不出任何方法来解决“不透明”问题..有什么帮助吗？提前致谢！

Answer 1

您最终需要通过渐变绘制边框：(untill border gradient is avalaible through all major browser ... chrome can do it for ages, FF still not )

.box {
     height: 100px;
     width: 100px;
     padding:3px;
  
  background:
    linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) top left no-repeat,
    linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) bottom left no-repeat,
    linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%) top left no-repeat,
    linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%)top right no-repeat;
  background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%;
}

<div class="box"></div>

已知大小的盒子上的盒子阴影也可以做一些事情：

.boxbis {
  margin: 3em;
  height: 200px;
  width: 200px;
  background: gray;
  box-shadow: 70px 70px 0 -60px turquoise, 70px -70px 0 -60px pink, -70px 70px 0 -60px tomato, -70px -70px 0 -60px orange, inset 0 0 0 3px white
}

<div class="boxbis">
  <div>