Making of CSS3 fillet

CSS3 fillet technology can beautify your page effect very well, and avoid the use of image assistance. On the one hand, it saves the time of making pictures, and on the other hand, it saves the delay and bandwidth caused by the browser loading pictures. Nowadays, this technology of making fillet with CSS has been supported by most mainstream browsers, including Safari, Google browser, ie, opera and Firefox. Let’s take a look at the syntax and explanation of border radius, and how ie supports it.

Watch the demoGrammar and description

In CSS3, the attribute used to generate fillet effect is border radius

.roundElement	{
	border-radius: 10px;
}

The function of the above code is to set the arc radius values of the four corners of an element to 10px. You can also specify for each corner:

.pearElement	{
	border-top-left-radius: 7px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 8px;
}

If you think the above writing method is too complicated, you can use the following simplified method of border radius:

.oddRoundElement {
	border-radius: 12px 5px 12px 5px;
	/* or */
	border-radius: 12px 5px;
}

The four values represent the four corners of top left, top right, bottom right and bottom left respectively.

Browser support for border radius

Because this kind of fillet technology appears in CSS3, when this property is used in old browsers or earlier browsers, you need to add the browser engine prefix (vendor prefixes) in CSS. It will look like {prefix} – border radius, and the specific prefix of various browser engines is as follows:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;

/* 火狐浏览器 */
-moz-border-radius-topleft:15px; /* top left corner */
-moz-border-radius-topright:50px; /* top right corner */
-moz-border-radius-bottomleft:15px; /* bottom left corner */
-moz-border-radius-bottomright:50px; /* bottom right corner */
-moz-border-radius:10px 15px 15px 10px;  /* shorthand topleft topright bottomright bottomleft */

/* webkit引擎的浏览器 */
-webkit-border-top-left-radius:15px; /* top left corner */
-webkit-border-top-right-radius:50px; /* top right corner */
-webkit-border-bottom-left-radius:15px; /* bottom left corner */
-webkit-border-bottom-right-radius:50px; /* bottom right corner */

Basically, you need to make a statement for each browser engine, plus these annoying slightly different code, to ensure full support for border radius. However, if you are using the latest version of browsers, including Firefox, Google, ie, etc., you do not need to use these prefixes, because this technology has been very mature and has been widely supported in various latest versions of browsers.

Let ie support border radius

It was not until IE9 that the border radius attribute was supported. I believe many web developers and web application designers are very frustrated. In IE9, the most important point is to use the edge meta tag

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

If your IE is older and does not support border radius, there are many other technologies that can make up for this defect. One of the best solutions I have encountered is to use a small JavaScript package called curvycorners. This curvycorners uses JavaScript to dynamically generate many div tags, use these div tags to draw rounded corners, and even support anti aliasing function.

The usage of curvycorners is very simple. The first step is to introduce curvycorners.js Script:

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js">
</script>

Curvycorners will look for elements with border radius attribute in DOM elements, and then round them in turn. No secondary images are required. You can even set the arc radius of the specified element:

var settings = {
	tl: { radius: 12 },
	tr: { radius: 12 },
	bl: { radius: 12 },
	br: { radius: 12 },
	antiAlias: true
};
/* moooo */
$$('.round').each(function(rd) {
  curvyCorners(settings,rd);
});

I strongly recommend that you specify the elements that need to be rounded, because it’s a CPU intensive process for the script to search the whole page to find the elements that need to be rounded, and this process is executed every time the page is loaded.

Watch the demo

All basic browsers support cssborder radius properties, including ie, Firefox, Safari, Google browser and opera. This small function can make your page show completely different effect.

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image