CSS3 attribute Fillet effect--border-radius property

Before CSS3, the effect of rounded corners can be achieved either through a picture or with the margin property (see here: http://www.hicss.net/css-practise-of-image-round-box/). The implementation process is tedious, but the advent of the CSS3 simplifies the way the rounded corners are implemented.

CSS3 implementation fillet requires the use of the Border-radius property, but because of browser compatibility issues, a private prefix is added during development.

1234	-webkit-border-radius-moz-border-radius-ms-border-radius-o-border-radius

The Border-radius property can actually be divided into four other properties:

12345

border-radius-top-left/*左上角*/border-radius-top-right /*右上角*/border-radius-bottom-right /*右下角*/border-radius-bottom-left/*左下角*///提示：按顺时针方式

Here are a few examples to illustrate the specific use of Border-radius.

1. Border-radius Single attribute value:

12	//html manifest < div  class= "Roundedcorner";

123456

.roundedCorner{    width:100px;    height:100px;    background-color:#f90;    border-radius:10px;//左上，右上，右下，坐下都是10px}

Effect:

2. Border-radius is a property value method:

1234567

<div class="roundedCorner2"></div><br/><br/><br/>//HTML清单.roundedCorner2{    width:100px;    height:100px;    background-color:#f99;    border-radius:20px10px5px2px;}

Effect:

However, in the development process (my work), often used is the Border-radius single attribute value, set 4 different rounded corners of the situation is very few.

The advantage of Border-radius is not only to make rounded borders, but also to draw circles and semicircle with Border-radius properties.

1, the method of making semicircle:

The height of the element is half the width, and the height of the radius element in the upper-left corner and upper-right corner is the same (greater than the height is also possible, at least a height value).

1234567

<div class="semi-circle"></div>.semi-circle{    width:100px;    height:50px;//高度是宽度的一半    background-color:#000;    border-radius:50px50px0 0;//左上和右上至少为height值}

Effect:

Know how to draw a semicircle, will extrapolate painting other direction of the circle, here no longer repeat.

2, the method of drawing a solid circle:

Width and height are consistent (square), then Four Corners are set to 1/2 of height or width.

1234567

<div class="circle"></div>.circle{    width:100px;    height:100px;    background-color:#cb18f8;    border-radius:50px;}

Effect:

Summarize:

CSS3 is both elegant and convenient to implement rounded corners, but not well-compatible, and if you need to consider an older version of the browser, consider the graceful downgrade method. The pros of the two approaches mentioned are good compatibility, but not elegant enough.

Which way to look at the specific project needs it.

CSS3 attribute Fillet effect--border-radius property