这是我的代码
.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;
}
<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>
li 标签按照我的预期进行了转换,但其内容也进行了转换,这使文本变得模糊(如您所见,它并不清晰)。有什么办法可以避免这种情况吗?
还有一个问题,在FF浏览器上看,左边的边框看起来不平滑。你知道为什么以及如何解决这个问题吗?
问候, 肯
更新于 2017 年 5 月 9 日 - 下午 5:19
我想添加一个名为“highlighted”的类来填充 li 标签的背景色。
.tab-nav {
width: 100%;
height: 40px;
margin-top: 100px;
}
.tab-nav-li {
display: inline-block;
margin: 0 5px;
min-width: 170px;
min-height: 40px;
line-height: 40px;
perspective: 38px; /*Declaring here*/
position: relative;
}
.tab-nav-li:before {
content: "";
width: 100%;
height: 40px;
position: absolute;
border: solid 1px gray;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: rotateX(2deg);/*Then rotate*/
transform-origin: bottom;
}
span {
display: block;
text-align: center;
}
.highlighted {
background-color: darkgray;
}
<div class="tab-nav">
<ul>
<li class="tab-nav-li highlighted">
<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>
如您所见,颜色已填充但不适合边框。
.tab-nav {
width: 100%;
height: 40px;
margin-top: 100px;
}
.tab-nav-li {
display: inline-block;
margin: 0 5px;
min-width: 170px;
min-height: 40px;
line-height: 40px;
perspective: 38px; /*Declaring here*/
position: relative;
}
.tab-nav-li:before {
content: "";
width: 100%;
height: 40px;
position: absolute;
border: solid 1px gray;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: rotateX(2deg);/*Then rotate*/
transform-origin: bottom;
}
span {
display: block;
text-align: center;
}
.highlighted:before {
background-color: darkgray;
}
<div class="tab-nav">
<ul>
<li class="tab-nav-li highlighted">
<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>
以上方式。颜色已填充并适合边框,但它覆盖了文本。
请帮我解决这个问题。
谢谢, 肯
最佳答案
首先在parent
元素上声明一个perspective
来对多个元素创建3d transform
,我们这里使用的是li
作为 perspective
甚至 rotated
,因此它在 span 标签文本上创建了 blur
。而是使用 pseudo
选择器在 X 轴
上旋转并在 li
元素上声明 perspective
,如下所示,
The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective.
.tab-nav {
width: 100%;
height: 40px;
margin-top: 100px;
}
.tab-nav-li {
display: inline-block;
margin: 0 5px;
min-width: 170px;
min-height: 40px;
line-height: 40px;
perspective: 38px; /*Declaring here*/
position: relative;
}
.tab-nav-li:before {
content: "";
width: 100%;
height: 40px;
position: absolute;
border: solid 1px gray;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: rotateX(2deg);/*Then rotate*/
transform-origin: bottom;
}
span {
display: block;
text-align: center;
}
<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>
关于html - CSS 转换而不转换其内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43861154/