CSS fillet effect-webkit-border-radius (Border-radius hidden power in CSS3)

CSS fillet effect-webkit-border-radius (Border-radius hidden power in CSS3)

Source: Internet anonymous time: 03-28 14:17:14 "Big Small"

Border-radius: This property can be used to achieve the effect of rounded edges. This property is now supported only by Mozilla/firefox and Safari 3.

-webkit-border-radius: Apple, Google, and some browsers, because they all use the WebKit kernel;
-moz-border-radius:moz This property is mainly dedicated to support Mozilla Firefox Firefox CSS Properties.
When these two properties have values, which attributes are removed, the browser that uses them to do the kernel has an effect, if no value, it does not affect the two properties and, IE, and does not matter. The effect is negligible if not removed.

Border-radius: This property can be used to achieve the effect of rounded edges.
This property is now supported only by Mozilla/firefox and Safari 3. Take a look at the following sample code:

Copy CodeThe code is as follows:
<div style= "Background-color: #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #000;
padding:10px; "
>
Mozilla/firefox and Safari 3 users will see a rounded border here
In addition, the designer can optionally specify the position of the fillet, top left, bottom left, upper right, lower right four directions. The specific writing formats in Mozilla/firefox and Safari are as follows:

-moz-border-radius-topleft/-webkit-border-top-left-radius
-moz-border-radius-topright/-webkit-border-top-right-radius
-moz-border-radius-bottomleft/-webkit-border-bottom-left-radius
-moz-border-radius-bottomright/-webkit-border-bottom-right-radius


Mozilla/firefox and Safari 3 see the top left rounded corners
Mozilla/firefox and Safari 3 see the top right corner
Mozilla/firefox and Safari 3 see the lower left rounded corners
Mozilla/firefox and Safari 3 see the lower right corner

the hidden power of Border-radius in CSS3

This article will briefly describe the use of CSS3 's Border-radius to draw circles, semicircular and One-fourth circles, and how to use them.
How to use the Border-radius property
The following are the most basic ways to use the Border-radius property.


Copy CodeThe code is as follows:
. Round {
border-radius:5px; /* All corners use rounded corners with a radius of 5px, this property is CSS3 standard property */
-moz-border-radius:5px; /* Private properties of Mozilla Browser */
-webkit-border-radius:5px; /* WebKit private properties of the browser */
border-radius:5px 4px 3px 2px; /* Four RADIUS values are upper-left, upper-right, lower-right, and lower-left corner, respectively */
}
about how to realize the fillet in IE, can see "excellent article which Included Ways to Achieve rounded corners in IE" this article.

1. Draw a circle with Border-radius
Solid Circle

, is a perfect solid circle drawn with the Border-radius attribute. The method of drawing a solid circle is equal in height and width, and the width of the border is set to half the height and width. The code is as follows.

Copy CodeThe code is as follows:
#circle {
width:200px;
height:200px;
Background-color: #a72525;
-webkit-border-radius:100px;
}
Hollow Circle

The method of drawing hollow circles and drawing solid circles through the Border-radius property is similar, except that the width of border is only half that of height and width. The code is as follows.

Copy CodeThe code is as follows:
#circle {
width:200px;
height:200px;
Background-color: #efefef; /* Can set to Transparent */
BORDER:3PX #a72525 Solid;
-webkit-border-radius:100px;
}
Dashed Circle

Copy CodeThe code is as follows:
#circle {
width:200px;
height:200px;
Background-color: #efefef; /* Can set to Transparent */
border:3px #a72525 dashed;
-webkit-border-radius:100px 100px 100px 100px;
} <-------------------------------------------------------------------------------------> Prefix

• -moz (e.g.-moz-border-radius) for Firefox
• -webkit (for example:-webkit-border-radius) for Safari and Chrome.

Example 1

<div id= "Round" ></div> #round {    padding:10px; width:300px; height:50px    ; border:5px solid #dedede;    -moz-border-radius:15px;      /* Gecko browsers */    -webkit-border-radius:15px;   /* Webkit browsers */    border-radius:15px;            /* syntax */}

Effect:

Example 2: No border

<div id= "Round" ></div>  #round {    padding:10px; width:300px; height:50px    ; Background: #FC9;     -moz-border-radius:15px;    -webkit-border-radius:15px;    border-radius:15px;}

Effect:

Writing order

/* Gecko browsers */-moz-border-radius:5px; /* Webkit browsers */-webkit-border-radius:5px; /* The syntax-likely to is standard so use for the future proofing */border-radius:10px;

Other

Supports top, right, bottom, left

border-radius:5px 15px 20px 25px;

Support for split writing

/* Gecko Browsers */-moz-border-radius-topleft:20px;-moz-border-radius-topright:0;-moz-border-radius-bottomleft:0 ;-moz-border-radius-bottomright:20px; /* Webkit Browsers */-webkit-border-top-left-radius:20px;-webkit-border-top-right-radius:0;- webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:20px; /* Syntax */border-top-left-radius:20px;border-top-right-radius:0;border-bottom-right-radius:0; Border-bottom-left-radius:  20px;

Support of

Browser	support of
Firefox (2)	√
Google Chrome (1.0.154+ ...)	√
Google Chrome (2.0.156+ ...)	√
Safari (3.2.1+ windows)	√
Internet Explorer (IE7, IE8)	X
Opera 9.6	X

CSS fillet effect-webkit-border-radius (Border-radius hidden power in CSS3)