css - 我想让边界的一部分与其他部分不同

Question

我想制作一个 div，在底部、左侧、右侧和顶部的大部分区域使用 2px 实心白色边框，除了一小部分大约 50px 宽的部分将具有 1px 实心绿色边框。如果您认为这会有所帮助，我知道 php。我当前的 css 是这样的...

div#ghostBox{
    width: 170px;
    height: 100px;
    border: 2px solid white;
    position: fixed;
    left: 550px;
    top: 270px;
}

顺便说一句，我正在制作吃 bean 人游戏。

Answer 1

你可以只使用一个元素并依赖渐变:

body {
  background: pink;
}

.box {
  width: 170px;
  height: 100px;
  border: 5px solid white;
  border-top: none;
  background: linear-gradient(to right, white 50px, green 0) 0 0/100% 5px no-repeat;
}

<div class="box">

  </div