The use of CSS3 rounded borders-Escape Tornado

WBOY
Release: 2016-08-20 08:47:52
Original
1654 people have browsed it

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

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!