Another example is the concise code of the rounded corner implemented by pure Css.

Thank you for your contribution to www.52webui.com.

In the past, I published many articles on Css rounded corners, including pure Css and combination of Css and images. Today I received my contribution from the webmaster of the design network, it is a rounded corner effect implemented by pure Css. The code is concise and not too beautifying. Please learn and enjoy it:

Css section:

Copy to ClipboardReference: [www.bkjia.com] <style>
# Roundhorn01 {width: 161px; height: auto ;}
. B1,. b2,. b3,. b4,. b1b,. B2B,. b3b,. b4b,. b0 {display: block; overflow: hidden ;}
. B1,. b2,. b3,. b1b,. B2B,. b3b {height: 1px ;}
. B2,. b3,. b4,. B2B,. b3b,. b4b,. b0 {border-left: 1px solid #30b1e5; border-right: 1px solid #30b1e5 ;}
. B1,. b1b {margin: 0 5px; background: #30b1e5 ;}
. B2,. B2B {margin: 0 3px; border-width: 2px ;}
. B3,. b3b {margin: 0 2px ;}
. B4,. b4b {height: 2px; margin: 0 1px ;}
. D1 {background: # ECF7FB ;}
. K0 {height: auto ;}
</Style>

HTML section:

Copy to ClipboardReference content: [www.bkjia.com] <div id = "roundhorn01"> <B class = "b1"> </B> <B class = "b2 d1"> </B> <B class = "b3 d1"> </B> <B class = "b4 d1"> </B>
<Div class = "b0 d1 k0"> Liehuo. Net
</Div>
<B class = "b4b d1"> </B> <B class = "b3b d1"> </B> <B class = "B2B d1"> </B> <B class = "b1b"> </B> </div>

Run the demo:

<Style> # roundhorn01 {width: 161px; height: auto ;}. b1 ,. b2 ,. b3 ,. b4 ,. b1b ,. b2B ,. b3b ,. b4b ,. b0 {display: block; overflow: hidden ;}. b1 ,. b2 ,. b3 ,. b1b ,. b2B ,. b3b {height: 1px ;}. b2 ,. b3 ,. b4 ,. b2B ,. b3b ,. b4b ,. b0 {border-left: 1px solid #30b1e5; border-right: 1px solid #30b1e5 ;}. b1 ,. b1b {margin: 0 5px; background: #30b1e5 ;}. b2 ,. b2B {margin: 0 3px; border-width: 2px ;}. b3 ,. b3b {margin: 0 2px ;}. b4 ,. b4b {height: 2px; margin: 0 1px ;}. d1 {background: # ECF7FB ;}. k0 {height: auto ;} </style> <div id = "roundhorn01"> <B class = "b1"> </B> <B class = "b2 d1"> </B> <B class = "b3 d1"> </B> <B class = "b4 d1"> </B> <div class = "b0 d1 k0"> Liehuo, fire College. net </div> <B class = "b4b d1"> </B> <B class = "b3b d1"> </B> <B class = "B2B d1"> </B> <B class = "b1b"> </B> </div> <br/> <center> If the effect cannot be displayed, press Ctrl + F5 to refresh the page. For more webpage code: <a href = 'HTTP: // www.bkjia.com/'target = '_ blank'> http://www.bkjia.com/</a> </center>

Tip: the code can be modified before running!