The implementation method of the CSS3 fillet is parsed by the instance

May 04, 2021 CSS3

3. Support for border-radius by browsers

In the past, if we used traditional methods to implement fillet borders, we needed to use multiple pictures as a background pattern. C SS3 added a new property border-radius, you can easily achieve the effect of fillet borders, on the one hand, to save the time to make pictures, on the other hand, to save the browser to load pictures caused by the delay and bandwidth. H owever, you need to use a browser that supports this property to run. M ainstream browsers such as Safari, Google Chrome, IE, Opera and Firefox support border-radius properties.

Grammar

.roundElement	{
	border-radius: 10px;
}

The effect of this code above is to set the radian radius value of each of the four corners of an element to 10px. Y ou can also specify separately for each angle: the radian radius value of the angle is 10px. You can also specify individually 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 is too complicated, you can use the following border-radius short-write method:

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

The four values represent the top-left, top-right, bottom-right, bottom-left four corners.

Instance resolution

Let's first look at the effect diagram:

The implementation method of the CSS3 fillet is parsed by the instance

HTML code:

<a href="#" class="button green">button</a>
<a href="#" class="button blue">button</a>
<a href="#" class="button gray">button</a>

If there is no CSS, the HTML above executes like this:

Writing of CSS3:

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;
}

Some different color button styles:

.green {
    color: #3e5706;
    background: #a5cd4e;
}
 
/* Blue Color */
 
.blue {
    color: #19667d;
    background: #70c9e3;
}
 
/* Gray Color */
 
.gray {
    color: #515151;
    background: #d3d3d3;
}

At this point the button looks like this:

Working with fillets with CSS:

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;
 
    text-shadow: 1px 1px 1px rgba(255,255,255, .22);
 
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
 
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
 
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

Now the buttons are much more rounded, take a look:

Not enough ah, no three-dimensional effect, and then perfect:

/* Green Color */
 
.green {
    color: #3e5706;
 
    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
 
/* Blue Color */
 
.blue {
    color: #19667d;
 
    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top,  #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top,  #70c9e3 0%,#39a0be 100%); /* W3C */
}
 
/* Gray Color */
 
.gray {
    color: #515151;
 
    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
    background: linear-gradient(top,  #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}

It's cool now, it's beautiful, do you like such a button?

To make the button a little bigger, we've added a big style:

<a href="#" class="button big green">sign in <span>One minute</span></a>
<a href="#" class="button big blue">sign in <span>One minute</span></a>
<a href="#" class="button big gray">sign in <span>One minute</span></a>

/* Big Button Style */
 
.big {
    padding: 0 40px;
    padding-top: 10px;
    height: 45px;
    text-transform: uppercase;
    font: bold 20px/22px Arial, sans-serif;
}
 
.big span {
    display: block;
    text-transform: none;
    font: italic normal 12px/18px Georgia, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

The effect of the large button:

We also need to deal with the different effects that appear when the mouse moves over the button:

.button:hover {
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}
.button:active {
    -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
    -moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
    box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}

The effect is as follows:

Support for border-radius by browsers

Because this fillet technology is found in CSS3, you need to add a browser engine prefix (vendor prefixes) to CSS when using this property in older or earlier browsers. It's going to look like this, and the specific browser engine prefix is like this:

-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 your own claims for each browser engine, plus these nasty slightly different codes to ensure full support for border-radius. However, if you're using the latest version of your browser, including Firefox, Google, IE, etc., you don't need to use these prefixes because the technology is mature enough to be widely supported in the latest versions of browsers.

Let IE support border-radius

It wasn't until IE9 that there was support for the border-radius attribute, and many Web developers and Web application designers were 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 doesn't support border-radius, there are many other techniques that can make up for this, and one of the best solutions is to use a very small JavaScript package called CurvyCorners. This CurveyCorners dynamically generates a lot of div tags with javaScript, which are used to draw rounded effects and even support the elimination of aliasing.

Curvy Cornes is simple to use. The first step is to introduce The Curved Cornes script .js page:

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

Curvy Corners looks for elements with border-radius properties in the DOM elements, and then gives them a fillet effect in turn. N o secondary pictures are required. You can even set the radian radius of a 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);
});

It is recommended that you specify the elements that need to use fillets, because getting the script to search the entire page for elements that require fillet processing is a CPU-consuming process that is performed when each page loads.

The implementation method of the CSS3 fillet is parsed by the instance

Table of contents

Grammar

Instance resolution

Support for border-radius by browsers

Let IE support border-radius

Cookie Consent