CSS边权问题

Question

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

任何想法可能是什么？

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

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

Answer 2

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

的连接方式

您可以在:after代码上使用li并在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>

Answer 3

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

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

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