Question

我使用仅在角落上显示的选择器创建了边框效果，如下面的代码段所示。

html {
    box-sizing: border-box !important;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.ix-border{
    position: relative;
    padding: 0;
    margin: 0;
    border-style: solid;
    display: inline-block;  
    border-width: 1px; 
    background-color: transparent;
    border-color: #A00;
}
.ix-border, .ix-border:hover, .ix-border:before, .ix-border:after{
    transition: 0.42s;
}
.ix-border:before, .ix-border:after{
    content:'';
    position:absolute;
    padding: 0;
    margin: 0;
    border-style: solid;
    display: inline-block; 
    border-width: 1px;
    background-color: transparent;
    border-color: #FFF;
}
.ix-border:before{
    top: 8px; right:-1px; bottom: 8px; left:-1px; 
    border-width: 0 1px 0 1px;
}
.ix-border:after{
    top:-1px; right: 8px; bottom:-1px; left: 8px; 
    border-width: 1px 0 1px 0;
}
.ix-border:hover{
    border-color: #F00;
}
.ix-border:hover:before{
    top: 16px; bottom: 16px;
    border-width: 0 1px 0 1px;
}
.ix-border:hover:after{
    right: 16px; left: 16px; 
    border-width: 1px 0 1px 0;
}

.elmt{
    width: 120px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}

<div class="elmt ix-border">
  Hello World
</div>

然而，我注意到当执行缩放时，应该被:: before / :: after选择器边框隐藏的元素边框有时在一侧或两侧随机可见，具体取决于缩放因素和导航器。

我添加了box-sizing:border box，以便在缩放计算中包含边框，如建议的here，但它仍未修复。

那么，我错过了什么吗？是否有任何修复它或任何其他方式（仅限css）以实现相同的效果？

Answer 1

这是一个非常好的问题，但我认为仅使用伪元素和CSS真的很难，所以我建议使用这样的真正html元素的替代方法，所以现在你避免了这个问题但是有一个额外的html元素:(

.corners {
  position: relative;
  height: 150px;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 150px;
  padding: 10px;
  line-height:150px;
  font-size:16px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
  transition: all 0.42s;
}

.right {
  right: 0;
  border-right: 1px solid;
  transition: all 0.42s;
}

.corners:hover .right{
 width:20px;
 height:20px;
 border-color:red;
}

.corners:hover .left{
 width:20px;
 height:20px;
 border-color:red;
}

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

好的，这次我是另一个问题，这次我只使用了3个html元素

div {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    text-align:center;
	line-height: 100px;
}
div div:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
	transition: all 0.42s;
}

div div:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
	transition: all 0.42s;
}


div div {
    margin: 0;
    position: absolute;
    top: 0;
}


span:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
	transition: all 0.42s;
}

span:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
	transition: all 0.42s;
}

div:hover span:after{
 width:30px;
 height:30px;
 border-color:red;

}

 div:hover span:before{
 width:30px;
 height:30px;
 border-color:red;
}

div:hover div:before{
 width:30px;
 height:30px;
 border-color:red;  
}

div:hover div:after{
width:30px;
height:30px;
border-color:red;  
}

<div>some content<div></div><span></span></div>

缩放问题:: after＆amp; ::边界之前

1 个答案: