3边有两个不同宽度的边框答案

【问题标题】：Two different width borders on 3 sides3边有两个不同宽度的边框
【发布时间】：2019-04-09 18:24:06
【问题描述】：

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

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

任何帮助都会很棒

【问题讨论】：

为什么不删除轮廓，而是在已有的元素内创建一个嵌套元素，并使用您想要的第二种边框样式？

标签： html css border outline

【解决方案1】：

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

你可以这样做：

在 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;
    }

无需使用大纲。

【讨论】：

创建一个 js 小提琴

【解决方案2】：

您可以使用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 */
}

&lt;div&gt;&amp;nbsp;&lt;/div&gt;

【讨论】：

【解决方案3】：

使用自己的 id 创建嵌套元素

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
}

&lt;div class="st1"&gt;&lt;div class="st2"&gt;&lt;/div&gt;&lt;/div&gt;

或

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

&lt;div class="st1"&gt;&lt;div class="st2"&gt;test&lt;/div&gt;&lt;/div&gt;

【讨论】：