Question

我想在底部，左侧，右侧和大部分顶部制作一个2px纯白色边框的div，除了一个大约50px宽的小部分，它将具有1px纯绿色边框。我知道php，如果你认为这将有所帮助。我现在的CSS就是这个......

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

顺便说一句，我正在制作一个打人的游戏。

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

Answer 2

我想你想要这个（：

＆＃13;

body{
            background-color:black;
            }
            p{
            color:white;
            margin: 1px;
            }
            
            /* TEXT BOX */              
            div#ghostBox{
                height: 100px;
                width: 150px;
                border: 2px solid white;
                border-top: 5px solid white;
                position: fixed;
                left: 50px;
                top: 50px;
                color:red;
                padding: 0px;
                padding-top: 0px;
            
            }
            
           /* High text color line */
            div#text{
                border-top: 5px solid green;
                  position: absolute;
              margin-top: 0px;
                width: auto;
                margin: 0px;
            }
            
            /* High color line after text */            
            div#notext{
                border-top: 5px solid red;
                margin-top: 0px;
                width: auto;
                margin: 0px;
            }

＆＃13;

<div id="ghostBox"><div id="text"><p>good luck
</p></div><div id="notext"></div></div>

＆＃13;

Answer 3

您可以使用css after或before伪选择器来执行此操作。以下只是一个例子。您可以根据您的要求进行修改

div#ghostBox {
  width: 170px;
  height: 100px;
  border: 2px solid white;
  position: fixed;
  background: red;
}

div#ghostBox:after {
  content: '';
  width: 50px;
  border: 2px solid green;
  position: absolute;
  padding-right: 50px;
}

<div id="ghostBox"> Ghost Box</div>

Answer 4

可能有更好的方法，但你可以在div的开头使用span：

只需设置范围的border-top并设置其宽度：

（我删除了示例的左侧和顶部属性）

body {
  background-color: red;
}

div#ghostBox {
  width: 170px;
  height: 100px;
  border: 2px solid white;
  position: fixed;
}

span {
  border-top: 2px solid blue;
  width: 50px;
  position: absolute;
}

<div id='ghostBox'>
  <span>&nbsp;</span> test
</div>

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

4 个答案: