Reprinted-subtle rounded corner parameters: CSS-only rounded corner Tab

Tabs can be regarded as the most common component in Web pages. Various tabs play a variety of interactive roles, whether as Content Switching or as navigation. Since it is an important interaction role, both color and shape are related to the entire interaction process-the rounded corner is meaningful. It is necessary to distinguish tab from other separation elements visually, just like a rounded corner button-it may be necessary that the rounded corner button is incompatible with the overall design style, because the highlight of interaction elements is more important than the whole design.

At the edge of ie67, 2012 may be the most obvious year of shift of the front-end center of gravity. In this case, we will not consider the compatibility of outdated browsers. For them, it is good to look at the content. Whether it is beautiful or not wrong, the times are improving, and we will not be unemployed until we look forward.

Today I learned how to write the following CSS rounded corner tab, which is different from the popular rounded corner tab on the Internet:The tab bottom also uses rounded corner transition.

I made a simple demo to list the HTML structure and CSS:

Demo

To achieve the bottom corner transition, the key is the following two points:

1. Border-radiusThis attribute works well in all modern browsers and does not require a prefix in Firefox or chrome updates.
2. The rounded corner of the tab cannot be filled.LiTo locate and fillATo overwrite the hidden tab edge.

I have drawn a block diagram of the specific structure, and I feel that the parameters of the rounded corner are very subtle...

CodeThere may be only one entry with a nominal value:

1: . Top-nav Li. Current: After {
 

2:Content:"\ 200b ";
 

3:Position:Absolute;
 

4:Display:Block;
 

5:Width:100%;
 

6:Left: 0;
 

7:Bottom:-5px;
 

8:Border-Bottom:1px solid # FFF;
 

9:}
 

That isContent: "\ 200b ";. As mentioned aboveU + 200bThe character is a "zero-width white space", which is invisible, so it does not need to be usedVisibility: hidden;To hide the content.

This article is from: Kwai Zhongjian blog