这是我的代码
.tab-nav {
width: 100%;
height: 40px;
margin-top: 100px;
}
.tab-nav-li {
display: inline-block;
border: solid 1px gray;
margin: 0 5px;
min-width: 170px;
min-height: 40px;
line-height: 40px;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: perspective(38px) rotateX(2deg);
transform-origin: bottom;
}
Run Code Online (Sandbox Code Playgroud)
<div class="tab-nav">
<ul>
<li class="tab-nav-li">
<span>The first tab</span>
</li>
<li class="tab-nav-li">
<span>The second tab</span>
</li>
<li class="tab-nav-li">
<span>The third tab</span>
</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
li标签被转换为我的期望,但它的内容也被转换,这使得文本模糊(你可以看到它不清楚).有什么方法可以避免这种情况吗?
还有一个问题,在FF浏览器上查看,左侧边框看起来不平滑.你知道为什么以及如何解决这个问题吗?
问候,肯
2017年5月9日下午5:19更新
我想添加一个"突出显示"的类调用来填充li标签的背景颜色.
.tab-nav {
width: 100%;
height: 40px;
margin-top: 100px;
}
.tab-nav-li …
Run Code Online (Sandbox Code Playgroud)