>  기사  >  웹 프론트엔드  >  CSS3 둥근 테두리 사용 - Escape Tornado

CSS3 둥근 테두리 사용 - Escape Tornado

WBOY
WBOY원래의
2016-08-20 08:47:521656검색

0. 빠른 시작

테두리 반경:50px;

1. border-radius 상세설명

테두리 반경:50px;

오른쪽 상단, 왼쪽 하단, 가로, 세로 거리는 50px입니다

테두리 반경:50%;

여기서 % 기호는 적용된 CSS 스타일 요소의 기본 길이와 너비입니다.

테두리 반경:50% 30% ;

위와 아래, 가로와 세로가 약 50%, 가로와 세로가 30%

테두리 반경:50% 30% 10%;

위, 가로, 세로 50%, 왼쪽, 오른쪽, 가로, 세로 30%, 아래, 가로, 세로 10%

테두리 반경:10% 50% 30% 10%;

위, 가로, 세로 모두 10%입니다. 오른쪽, 가로, 세로 모두 50%입니다. 아래, 가로, 세로 모두 30%입니다. 왼쪽, 가로, 세로 모두 10%

/앞은 가로, 뒤는 세로

테두리 반경:50% / 30% ;

위, 왼쪽, 아래, 오른쪽, 가로 50%, 세로 30%

테두리 반경:50% / 30% 10%;

상단, 오른쪽, 하단 및 왼쪽, 가로 50%, 세로, 왼쪽 및 오른쪽 30%, 세로 10%

나머지 규칙은 사용하기 전에 예시를 제시하였으므로 하나씩 설명하지는 않겠습니다

2. 개별 설정

테두리-왼쪽 상단-반경:10%;

테두리-왼쪽 상단-반경:10% 30%;

아래가 위, 오른쪽이 왼쪽에 해당

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.