Bootstrap 3.0 LESS source code analysis (2)_html/css_WEB-ITnose

border-radius is the most common CSS3 property, but how much do you know about it?

For example:

border-radius:2em;

What is the equivalent?

border-top-left-radius:2em;border-top-right-radius:2em;border-bottom-right-radius:2em;border-bottom-left-radius:2em;

In fact, it is first the arc in the horizontal direction (top or bottom), and then the arc in the vertical direction (left or right).

Forgot a question

Please use CSS to realize the ellipse as shown above. Interested students can think about it.

Back to Bootstrap 3.0

OK, let’s go back to Bootstrap. There are only the following four functions for border radius in mixins.less:

// Single side border-radius.border-top-radius(@radius) {  border-top-right-radius: @radius;   border-top-left-radius: @radius;}.border-right-radius(@radius) {  border-bottom-right-radius: @radius;     border-top-right-radius: @radius;}.border-bottom-radius(@radius) {  border-bottom-right-radius: @radius;   border-bottom-left-radius: @radius;}.border-left-radius(@radius) {  border-bottom-left-radius: @radius;     border-top-left-radius: @radius;}

It can be seen that Bootstrap provides a shortcut method for single-sided rounded corners. We found that the border-radius related properties in Bootstrap 3.0 do not use any prefix.

In fact, currently, modern browsers fully support this attribute. For the specific support level, see:

http://caniuse.com/border-radius

The most expensive CSS property

According to the kangax article, for border-radius, when the page is scrolled or redrawn, the CSS property with the highest computational cost generates more calculation time than other properties. .

So be careful to reduce the number of elements that use this attribute too much on a single page to avoid page lags.