Home  >  Article  >  Web Front-end  >  The use of CSS3 rounded borders-Escape Tornado

The use of CSS3 rounded borders-Escape Tornado

WBOY
WBOYOriginal
2016-08-20 08:47:521655browse

0. Quick Start

border-radius:50px;

1.border-radius detailed explanation

border-radius:50px;

Top right, bottom left, horizontal and vertical distance are 50px

border-radius:50%;

The % sign here is the base length and width of the CSS style element that has been applied

border-radius:50% 30% ;

Up and down, horizontal and vertical is about 50%, horizontal and vertical is 30%

border-radius:50% 30% 10%;

Up, horizontal and vertical is 50%, left and right, horizontal and vertical is 30%, down, horizontal and vertical is 10%

border-radius:10% 50% 30% 10%;

On the top, both horizontal and vertical are 10%. Right, horizontal and vertical are both 50%. Down, horizontally and vertically are 30%. Left, horizontal and vertical are all 10%

/The front is horizontal,/the back is vertical

border-radius:50% / 30% ;

Up, left, down, right, horizontal is 50%, vertical is 30%

border-radius:50% / 30% 10%;

Up, right, down, left, horizontal are 50%, up and down vertically 30%, left and right vertical 10%;

The rest of the rules have been given examples before they are used, so I won’t describe them one by one

2. Individual settings

border-top-left-radius:10%;

border-top-left-radius:10% 30%;

Bottom corresponds to top, right corresponds to left

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn