###我的问题(A自己写的,B是网课)
1. 我自己写的可以实现和网课一样的效果,感觉更简单,为什么网课要这么写?
2. 网课代码里的a11y有什么用?
3. 网课css代码.button li a:after,.button li a:after这个怎么会形成一个类似边框的效果?为什么不直接像我做的那样直接给li或者a加一个阴影不就好了嘛?
以下是html代码A1
以下是css代码A2
以下是html代码B1
以下是css代码B2
body {
padding: 50px;
}
.button ul li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
color: #1e1e1e;
/* 文字间距 */
letter-spacing: 0.5px;
border-radius: 50px;
overflow: hidden;
z-index: 1;
cursor: pointer;
vertical-align: middle;
box-sizing: border-box;
}
.button-inner {
position: relative;
z-index: 3;
display: block;
border-radius: 22px;
padding: 5px 37px 0 37px;
margin-right: 0px;
box-sizing: border-box;
}
.a11y {
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
display: block;
margin: 0;
padding: 0;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: #d6d6d6;
padding-top: 0px;
line-height: 46px;
color: #fff;
display: block;
transition: transform 0.2s ease-in;
transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
}
.button li a:after,
.button li a:after {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 1px;
left: 1px;
bottom: 1.1px;
right: 1px;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
border-radius: 50px;
}
.button li a:hover .mask {
transform: none;
}