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
b
1
,.b
2
,.b
3
,.b
4
,.b
5
,.b
6
,.b
7
,.b
8
{
height
:
1px
;
font-size
:
1px
;
overflow
:
hidden
;
display
:
block
;
}
.b
1
,.b
8
{
margin
:
0 5px ; }
.b
2
,.b
7
{
margin
:
0 3px ;
border-right
:
2px solid ;
border-left
:
2px solid ; }
.b
3
,.b
6
{
margin
:
0 2px ;
border-right
:
1px solid ;
border-left
:
1px solid ; }
.b
4
,.b
5
{
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