Question

我有这段代码可以创建不同宽度的双边框，但是我只需要在左侧，顶部和右侧显示即可。使用border属性很好，但使用轮廓则不可能，因为它不共享相同的border-left等

border: double 4px black;
outline: solid 3px black;

任何帮助都很好

Answer 1

您可以使用box-shadow代替outline-请参见下面的演示

div {
  line-height: 20px;
  border-color: black;
  border-style: double;
  border-width: 4px 4px 0 4px;
  box-shadow: -3px 0 0 0 black,  /* left */
              3px 0 0 0 black,  /* right */
              3px -3px 0 0 black, /* top */
              -3px -3px 0 0 black; /* top */
}

<div>&nbsp;</div>

Answer 2

为什么不删除轮廓，而是在元素内部创建嵌套元素？

您可以这样做：

在HTML中创建嵌套元素：

<div class="big">
        <div class="small">Some text Here.....</div>
</div>

然后应用CSS：

.big{
      border: 5px solid green;
      border-bottom: none;
    }
.small{
        border: 2px solid black;
        border-bottom: none;
        margin: 2px;
    }

无需使用轮廓。

Answer 3

创建具有其自己ID的嵌套元素

<div id="outer-border">
   <div id="inner-border"></div>
</div>

然后为这些元素设置正确的CSS属性，例如：

#outer-border{border-bottom: none}
#inner-border{border-bottom: none}

Answer 4

这是一个使用渐变创建第二个边框的想法。

.box {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-bottom:none;
  padding:3px; /*control the distance between border*/
  padding-bottom:0;
  background:
    linear-gradient(green,green) top  /100% 4px,
    linear-gradient(green,green) left /4px  100%,
    linear-gradient(green,green) right/4px  100%;
  background-repeat:no-repeat;
  background-origin:content-box;
}

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

使用伪元素的另一种想法：

.box {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-bottom:none;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  right:3px;
  bottom:0;
  border: solid 4px green;
  border-bottom:none;
}

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

Answer 5

.st1, .st2 {
    background-color: yellow;
}
.st1 {
    outline: solid 3px black;
    width: 400px;
    height: 200px;
    position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}

<div class="st1"><div class="st2"></div></div>

或

.st1, .st2 {
    background-color: yellow;
}
.st1 {
    border: 3px solid black;
    border-bottom: none;
    width: 400px;
    height: 200px;
    position: relative;
    box-sizing: border-box;
}
.st2 {
    border: 1px solid black;
    border-bottom: none;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 0px;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

<div class="st1"><div class="st2">test</div></div>

3面两个不同的宽度边框

5 个答案: