css3悬停时出现双边框重叠
css3悬停时出现双边框重叠，知识点分析：
（1）绝对定位 + margin，让明确宽高的盒子水平垂直居中于窗口
（2）过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
transition: all 0.4s;
当前案例就是在伪元素之间切换过渡效果。
（3）calc() 函数用于动态计算长度值。
绝对定位 + margin，让明确宽高的盒子水平垂直居中于窗口
<style>
.box{
width: 360px;
height: 360px;
border: 6px solid red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
.fancy-btn:hover::after{
border: 2px solid #fda;
width: calc(100% - 10px);
height: calc(100% + 10px);
}
html:
<a href="#" class="fbtn">January</a> <br> <a href="#" class="fbtn">February</a> <br> <a href="#" class="fbtn">March</a>
css:
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background: url('./img/image.jpg') no-repeat;
background-size: cover;
overflow: hidden;
text-align: center;
margin: 100px;
}
.fbtn{
display: inline-block;
padding: 10px 20px;
border: 2px solid #fda;
color: #fda;
font-family: 'Dancing Script', serif;
font-style: italic;
font-size: 30px;
text-decoration: none;
margin: 20px auto;
position: relative;
}
.fbtn::after{
content: '';
display: inline-block;
width: 100%;
height: 100%;
border: 2px solid rgba(0,0,0,0);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: all 0.4s;
}
.fbtn:hover::after{
border: 2px solid #fda;
width: calc(100% - 10px);
height: calc(100% + 10px);
}
</style>
吐槽一下
还没有留言，还不快点抢沙发？