Border-radius parameters cited from the CSS3 writing order

The fish said I would not take the title ...

At that time, writing this article is mainly to discuss the difference between graceful demotion and progressive enhancement, according to normal logical thinking, whether it is degraded or enhanced, should be no difference to the effect, because the latter will cover the former, but today do not want to see Zhang Xin Xu's an article, about the CSS3 properties of the writing order (10, Forgive me ignorant t_t), the standard CSS3 attribute and the prefix with WebKit are different in some cases, such as Border-radius and-webkit-border-radius with two parameters, the effect is not the same:

. not-a-square {   border-radius:30px 10px;/* Let Box have a 30-pixel arc in the upper-left and lower-right corner, a 10-pixel arc in the lower-left and upper-right corner */   -webkit-border-radius:30px 10px; /*box render for each corner is 30 pixels wide by 10 pixels high arc */}

Show the results (directly borrow the map, of course, the fish also practiced, and indeed so ~):

By the way, take a look at the parameters of Border-radius:

According to the official explanation of the world-class, this is the case:

1-4 Length| % 1-4 Length| %;
1-4 refers to the radius of four values, length and% refers to the unit of the value.

People who have written border know that border can take four parameters to set four borders (the order of upper and lower right), the same, Border-radius can also take four parameters, and in the direction of clockwise resolution, left, right, bottom right, bottom left:

. box{    border-radius:5px 10px 20px 50px          }

Show Results:

Two parameters, the top left and bottom right, upper right and bottom left, such as. Div1{border-radius:2em 1em}, no, direct demo

Three parameters, it is upper left, upper right and bottom left, lower right, for example. Div1{border-radius:2em 1em 3em},demo

What about the arguments behind the slash/split? This is true, the first parameter represents the horizontal radius of the fillet, the second parameter represents the vertical radius of the fillet, so you can now draw a rounded corner with or without symmetry:

. Div1{border-radius:2em/1em}

See here you will not if the four rounded corners are to make a special shape, is not 2em/1em, 1em/0.5em, 3em/1em, 1em/1em like the above four parameters of the same set (I think so), the answer is wrong! Miss! Of Because the official explanation is to put 1-4 back in front and put 1-4! The fish is not eaten is the stupid s's ~

. div1{        border-radius:10px 20px 30px 40px/40px 30px 20px 10px}

In the clockwise order, the slash/left is the horizontal radius of four fillets, the right side is the vertical radius of the four fillets, but usually we seldom write the right argument, that is, the default right equals the left value. Of course, you can omit some of the values, such as this. Div1{border-radius:2em 1em 4em/0.5em 3em;}, parse order you can calculate it by yourself.

And then go back to teacher Zhang's that-weibkit prefix problem {-webkit-border-radius:30px 10px} is actually equal to {border-radius:30px/10px}, the effect is the same, as for why, I do not know, Zhang said Background-image also have this problem, elder sister look again tomorrow, back home~

Parameter: http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4% b9%a6%e5%86%99%e9%a1%ba%e5%ba%8f/

Http://www.w3school.com.cn/cssref/pr_border-radius.asp