2. CSS style analysis
From 4-11 rows are defined CSS style. We can see that there is a b1-b4 to indicate the border on the border, b1b-b4b to indicate the border under the border, B to represent the middle part,
1): Line sequence:
If you want to achieve the rounded corner shown above, you need four lines B1, B2, B3, B4, and the following: B1b, B2B, b3b, and b4b.
Because of the interconnection, the block method is used, because the block method adds a new row to the object to maintain their hierarchy.
Therefore, the order of the upper border is B1, B2, B3, B4, and the lower border is b4b, b3b, B2B, and B1b.
2): width and height of each line
If you set the Border width to 1 and the rounded corner width to 5
When B1 is used, the left and right margins are 5.
B2 left and right margins 3, then the width is 2
B3 left and right margins 2, width 1
B4 left and right margin 1, width 5-2-1-1 = 1, height 5-1-1-1 = 2
3): Code details
. B1,. B2,. B3,. B4,. B1b,. B2B,. b3b,. b4b,. B {display: block; overflow: hidden ;}
The reality of all lines is block, that is, the default value of the block object. Forces the object to be presented as a block object and adds a new row to the object.
. B1,. B2,. B3,. B1b,. B2B,. b3b {Height: 1px ;}
The height is 1 pixel, where B4 and b4b are 2px;
. B2,. B3,. B4,. B2B,. b3b,. b4b,. B {border-left: 1px solid #999; border-Right: 1px solid #999 ;}
Except B1, the left and right sides of B1b are 1px. ;
. B1,. B1b {margin: 0 5px; Background: #999 ;}
B1, B1b margin 0, left margin 5
. B2,. B2B {margin: 0 3px; border-width: 2px ;}
B2, B2B top and bottom margins 0, left and right margins 3, the side width is 2, so it is just connected to B1
. B3,. b3b {margin: 0 2px ;}
B3, b3b margin 0, left margin 2 side width is 1
. B4,. b4b {Height: 2px; margin: 0 1px ;}
B4, b4b; Height: 2; top/bottom margin: 0; left/right margin: 1
. D1 {Background: # f7f8f9 ;}
4): Data Structure
<Div style = "width: 771px">
<B class = "B1"> </B> <B class = "B2 d1"> </B> <B class = "B3 d1"> </B> <B class = "B4 d1"> </B>
<Div class = "B d1">
<Font style = "font-size: 26px; color: red; margin: 0px 10px;"> simplified CSS rounded rectangle </font>
</Div>
<B class = "b4b d1"> </B> <B class = "b3b d1"> </B> <B class = "B2B d1"> </B> <B Class = "B1b"> </B>
</Div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
