Html 边框长度小于div宽度？

我有以下代码

div {
   width:200px;
   border-bottom:1px solid magenta;
   height:50px;   
}

---

div宽度为200px，因此边框底部也为200px，但如果我希望边框底部仅为100px而不更改div宽度，该怎么办？

您的边框大小不能与div本身的大小不同

解决方案是只需在neath下添加另一个div，居中或绝对定位，具有所需的1像素边界，高度仅为1像素

---

我将原始边框保留在中，以便您可以看到宽度，并有两个示例-一个是100宽度，另一个是100宽度居中。删除您不想使用的内容。

边框包含整个html元素。如果需要半底边框，可以使用其他可识别的块（如span）将其包裹起来

HTML代码：

<div> <span>content here </span></div>

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

---

可以使用伪元素。例如

div{ 宽度：200px； 高度：50px； 位置：相对位置； z指数：1； 背景：eee； } 部门：以前{ 内容：； 位置：绝对位置； 左：0； 底部：0； 高度：1px； 宽度：50%；/*或100px*/ 边框底部：1px纯品红色； } 项目1

---

第2项在现代浏览器中实现这一点的另一种方法是使用负扩展框阴影。查看此更新的小提琴：

---

不过，我认为最安全、最兼容的方法是上面公认的答案。我想和大家分享另一种技巧。

你可以使用线性渐变：

div{ 宽度：100px； 高度：50px； 显示：块； 背景图像：线性梯度向右，000 1px，RGBA255255,0 1px，线性梯度向左，000 0.1rem，RGBA255255,0 1px； 背景位置：底部； 背景尺寸：100%25px； 背景重复：无重复； 边框底部：1px实心000； 边框顶部：1px纯红； }

---

我像这样在h3标签下面加了一行

<h3 class="home_title">Your title here</h3> 
.home_title{
    display:block;
}
.home_title:after {
    display:block;
    clear:both;
    content : "";
    position: relative;
    left    : 0;
    bottom  : 0;
    max-width:250px;
    height  : 1px;
    width   : 50%;  /* or 100px */
    border-bottom:1px solid #e2000f;
    margin:0 auto;
    padding:4px 0px;
}

这将有助于：

---

这将创建宽度为50%的水平线，如果要编辑样式，则需要创建/修改类

派对迟到了，但对于任何想要在底部和右侧创建两个边框的人，在我的情况下，您可以在接受的答案中使用该技术，并在第二行添加：after psuedo元素，然后只需更改如下属性：

---

我刚刚使用：after和：：after完成了与此相反的操作，因为我需要将底部边框精确地加宽1.3rem：

我的元素在同时使用：before和：after时发生了超级变形，因为元素与display:flex、flex direction:row和align items:center水平对齐

您可以使用它来制作更宽或更窄的对象，或者可能是任何数学维度的模型：

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
  display: block;
}

---

抱歉，这是SCSS，只需将数字乘以10，然后用一些正常值更改变量。

我有理由在div容器中的图片之间有一些底部边框，最好的单行代码是-边框底部样式：inset

我在我的项目中做了类似的事情。我想在这里分享一下。您可以添加另一个div作为子对象，给它一个小宽度的边框，并使用常用的CSS将其放置在左侧、中间或右侧

HTML代码：

<div> <span>content here </span></div>

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

---

这也是我的技巧，但请注意，它将在div的左半部分提供边框。如果您希望它居中，请提供div:before left:50px。问题没有指定边框应显示在哪个位置，因此我没有考虑其他位置如果底部边框的宽度为50%，并且您希望它居中，样式需要保留：25%，因为它将是25%+50%+25%是的，我知道在这个例子中它是有效的。但对于其他做类似事情的人，可能会试图使其响应，您可能需要使用%作为我需要答案的情况。使用：before上的margin:auto、right:0、left:0将线居中。如果这对你有帮助，请向上投票。这没有帮助。该要求是div的边界

div
{
  width:500px;
  height:500px;   
  position: relative;
  z-index : 1;
}
div:before {
  content : "";
  position: absolute;
  left    : 25%;
  bottom  : 0;
  height  : 1px;
  width   : 50%;
  border-bottom:1px solid magenta;
}
div:after {
  content : "";
  position: absolute;
  right    : 0;
  bottom  : 25%;
  height  : 50%;
  width   : 1px;
  border-right:1px solid magenta;
}

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
  display: block;
}

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

   .active {
    color: magneta;
  }
   .active .ac-brdr {
        width: 20px;
        margin: 0 auto;
        border-bottom: 1px solid magneta;
  }