如何在此对象的右侧添加边框？

Question

如何在此对象的右侧添加边框以完成具有与左边框相同属性的方块。添加box-shadow：20px 0 0 0 red;不起作用，但覆盖左边界。

https://jsfiddle.net/kheuz1z4/

HTML     

CSS

#borders {
  border-top: 20px solid black;
  box-shadow: -20px 0 0 0 red;
  border-bottom: 20px solid green;
  height: 150px;
  margin: 30px;
  width: 150px;
  border-radius: 20px 20px 0px 0px;
}

Answer 1

你可以用逗号分隔盒子阴影：

  #borders {
  border-top: 20px solid black;
  box-shadow: -20px 0 0 0 red, 20px 0 0 0 red;
  border-bottom: 20px solid green;
  height: 150px;
  margin: 30px;
  width: 150px;
  border-radius: 20px 20px 0px 0px;
}

来源：Is there a way to use two CSS3 box shadows on one element?

Answer 2

border-top-right-radius:  //Value

我认为您可以通过添加顶级css文件找到解决方案

Answer 3

#borders {
  border-top: 20px solid black;
  border-right: 20px solid black, , 20px 0 0 0 red;
  box-shadow: -20px 0px 0 0 red;
  border-bottom: 20px solid green;
  height: 150px;
  margin: 30px;
  width: 150px;
  border-radius: 20px 20px 0px 0px;
}

请检查您是否需要https://jsfiddle.net/kheuz1z4/2/