CSS：分割框边框颜色

Question

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

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

但是，当然，它并没有给我我想要的结果....我无法弄清楚任何方法来解决这个“不透明 - 透明”问题..任何帮助？提前谢谢！

Answer 1

您最终需要通过渐变绘制边框：<local:CutCornerBorder BorderBrush="Black" BorderThickness="3" CornerCut="40" Margin="30"> <TextBlock Text="HELLO!" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Green" Margin="20" /> </local:CutCornerBorder>

＆＃13;

＆＃13;

(untill border gradient is avalaible through all major browser ... chrome can do it for ages, FF still not )

＆＃13;

.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%;
}

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

.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
}

＆＃13;

＆＃13;

＆＃13;