CSS 边框右问题答案

【问题标题】：CSS Border Right IssueCSS 边框右问题
【发布时间】：2017-04-12 23:35:56
【问题描述】：

我在<li> 中遇到了我的边框问题正如你看到的黄色右边框在底部有点修剪，我试图找到一个解决方案，但我不能，当用户放大浏览器时会发生这种情况。

有什么想法吗？

这是我的 jsfiddle： https://jsfiddle.net/veft8jw9/

【问题讨论】：

不应该关闭最后一个<li>，例如：<li class="" au-target-id="34">&nbsp;</li> 吗？
这是border的默认渲染。当borders 应用于同一元素时，这就是它们与adjacent border 的连接方式。

标签： css

【解决方案1】：

你可以像这样使用盒子阴影而不是边框：

.sidebar-nav li {
  box-shadow: inset 0 -1px 0 0 blue;
  padding: 15px;
}

.sidebar-nav li:hover {
  box-shadow: inset 0 -1px 0 0 blue, inset -3px 0 0 0 red;
  cursor: pointer;
}

【讨论】：

【解决方案2】：

这是边框的默认渲染。当边框应用于同一元素时，这就是它们与相邻边框的连接方式

您可以在li 标签上使用:after 并将其显示在hover 上，如下图所示。

div {
  width: 200px;
  height: 200px;
  border: 50px solid;
  border-color: red blue green yellow;
}


/* your solution */

.sidebar-nav li {
  position: relative;
  border-bottom: 1px solid blue;
  padding: 15px;
}

.sidebar-nav li:hover:after {
  content: '';
  display: block;
  border-right: 5px solid yellow;
  position: absolute;
  width: 5px;
  height: 100%;
  right: 0;
  top: 0;
}

<div></div>

<h1>your solution</h1>

<ul class="sidebar-nav">

  <li>link 1</li>

  <li class="active" au-target-id="34">

    link 2</li>

  <li class="" au-target-id="34">

</ul>

【讨论】：

【解决方案3】：

CSS 边框的末端都有倒角以适应连接边框。

我建议在带有黄色背景的带边框的 div 周围应用一个包装器。然后对有边框的 div 应用右填充以获得黄色区域。

【讨论】：

【解决方案4】：

您可以使用伪css提供边框，请使用下面的css作为相同的html。

.sidebar-nav li {
    border-bottom: 1px solid blue;
    padding: 15px;
    position:relative;
}

.sidebar-nav li:hover {
    cursor: pointer;
}

.sidebar-nav li:hover:after {
    content:"";
    position:absolute;
    width:5px;
    top:0px;
    bottom:0px;
    right:0px;
    background:#f00;
}

【讨论】：