Pure Code Implementation CSS Fillet

I am talking about the pure code, refers to the use of the picture to achieve rounded corners, the picture to achieve the fillet, here do not say.

There are 3 main ways to achieve rounded corners in pure code:

First type: CSS3 fillet

#chaomao{    border-radius:2px 2px 2px 2px;}

The above code means the top left, top right, bottom right, bottom right, respectively, 2px rounded corners.

Of course, it can be abbreviated: BORDER-RADIUS:2PX

Direction is counterclockwise from top left to bottom left

You can also specify separately

#chaomao{    border-top-left-radius:4px 2px;    border-top-right-radius:3px 4px;    border-bottom-right-radius:6px 2px;    border-bottom-left-radius:3px 4px;}

The meaning is concise.

Browsers such as Firefox also support their own private fillet properties

Firefox support Border-radius (fillet):-moz-border-radius:2px

WebKit kernel for Safari and chrome support Border-radius (fillet):-webkit-border-radius:2px

Opera Support Border-radius (fillet): border-radius:2px

CSS3 the most simple to realize the fillet, unfortunately ie6-8 does not support

The second type: with css+html code

Baidu is aware of the home page fillet is this way to achieve

A bit: compatible with all browsers,

Cons: Need to add extra HTML tags, maintenance more trouble

The implementation principle is the use of multiple empty layers, the upper layer less than below 1px, so that the corner appears to be an arc shape

HTML code:

<div>    <strong class="b1"></strong>    <strong class="b2"></strong>    <strong class="b3"></strong>    <strong class="b4"></strong>    <div class="content">文字内容</div></div>

CSS Code

b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{    height:1px;    font-size:1px;    overflow:hidden;    display:block;}.b1,.b8{    margin:0 5px;}.b2,.b7{    margin:0 3px;    border-right:2px solid;    border-left:2px solid;}.b3,.b6{    margin:0 2px;    border-right:1px solid;    border-left:1px solid;}.b4,.b5{    margin:0 1px;    border-right:1px solid;    border-left:1px solid;    height:2px;}

Third: Using jquery fillet plug-in code to achieve rounded corners

Pros: Compatible with all browsers

Cons: Need to use jquery plugin

This is a jquery plugin, when used, requires jquery files together, the use of the method is very simple

$ ("#chaomao"). Corner ("5px")

It implements the ID value of the Chaomao element, the rounded corners of the 5px
jquery Fillet Plug-in

Pure Code Implementation CSS Fillet