我正在开发一个小型 LESS 前端库,我将在未来的项目中使用它。我还计划在它完成并推断有用时以开源许可证发布它。
这个库将包括花哨的 Chrome 风格的标签。当前使用 CS3 边框半径的实现相当粗糙,并且基于我在互联网上找到的小提琴,它根本不支持非 webkit 浏览器。由于它将用于各种各样的项目,因此我必须使其与大多数主要浏览器兼容。经过一些调整后,它在 FF 和 Chrome 上看起来几乎一样,但在 Firefox 上它有一些视觉故障。
相关的LESS源部分:
// Tabs
.fancy-tabs(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color)
{
margin: 0;
list-style-type : none;
line-height : 35px;
max-height: 35px;
overflow: hidden;
display: inline-block;
padding-right: 20px;
>li
{
.fancy-tab(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color);
}
}
.fancy-tab(@tab-color; @active-tab-color; @hover-tab-color; @click-tab-color)
{
// Links
a
{
// To make the other parts of the tab clickable
padding: 0 1em;
margin: 0 -1em;
display: inline-block;
// max-width:100%;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: inherit;
}
// Styling the tab
float : left;
margin : 5px -10px 0;
border-top-right-radius: 25px 170px;
border-top-left-radius: 20px 90px;
padding : 0 30px 0 25px;
height: 170px;
background: @tab-color;
position : relative;
box-shadow: 0 10px 20px rgba(0,0,0,.5);
max-width : 200px;
.transition(all .2s);
// Indent the first child
&:first-child
{
margin-left: 10px;
}
// Fancy rounding
&:before, &:after{
content : '';
background : @transparent;
height: 20px;
width: 20px;
border-radius: 100%;
border-width: 10px;
top: 0px;
border-style : solid;
position : absolute;
.transition(inherit);
}
&:before{
border-color : @transparent @tab-color @transparent @transparent;
.rotate(48deg);
left: -23px;
}
&:after{
border-color : @transparent @transparent @transparent @tab-color;
.rotate(-48deg);
right: -17px;
}
// Colorize active tab
&:active{
background: @click-tab-color;
}
&:hover:before{
border-color : @transparent @hover-tab-color @transparent @transparent;
}
&:hover:after{
border-color : @transparent @transparent @transparent @hover-tab-color;
}
&:active:before{
border-color : @transparent @click-tab-color @transparent @transparent;
}
&:active:after{
border-color : @transparent @transparent @transparent @click-tab-color;
}
&.ac
{
z-index: 2;
background: @active-tab-color !important;
&:before{
border-color : @transparent @active-tab-color @transparent @transparent;
}
&:after{
border-color : @transparent @transparent @transparent @active-tab-color;
}
}
// Applying pointer effects
.hover(highlight, @hover-tab-color);
.click(highlight, @click-tab-color);
}
小提琴使用编译的 CSS:http: //jsfiddle.net/kdani3/G9QE9/1/
我认为这个问题很可能与 Gecko 的边界半径渲染引擎有关,但我不知道任何解决方法。
截屏: