CSS 테두리 반경 생성기

CSS 테두리 반경 생성기 기능

• 01

  균일 및 모서리당 모드

  균일 모드는 모든 모서리에 하나의 반지름을 적용합니다. 모서리당 모드는 좌상단, 우상단, 우하단, 좌하단을 독립적으로 제어합니다——약, 잎, 비대칭 태그 모양은 몇 번의 클릭으로 가능합니다.

• 02

  타원(X/Y) 모서리

  타원 모드를 전환하여 각 모서리에 대한 가로 및 세로 반지름을 지정합니다——유기적인 blob 모양에 대한 CSS가 지원하는 구문입니다.

• 03

  3개 단위

  px, %, rem 사이를 전환합니다. 백분율 값은 상자로 확장하는 진정한 타원을 만듭니다. rem 값은 접근성을 위해 루트 글꼴 크기를 추적합니다.

CSS 테두리 반경 생성기 자주 묻는 질문

px와 %의 차이는 무엇입니까?

픽셀 반지름은 절대값입니다——16px 모서리는 항상 16px입니다. 백분율 반지름은 요소의 너비와 높이에 상대적이므로 50%는 정사각형 상자에서 완벽한 원을 만들고 직사각형에서는 타원을 만듭니다.

타원 모드를 언제 사용해야 합니까?

한 축에서 더 불룩한 모서리가 필요한 경우 타원 모드를 사용합니다——예를 들어 수평 약(50%/100%) 또는 잎 모양의 blob 모양. CSS는 이를 `좌상단-x 우상단-x ... / 좌상단-y 우상단-y ...`로 표현합니다.

비정사각형 상자에서 내 백분율 반지름이 잘못 보이는 이유는 무엇입니까?

테두리 반지름의 백분율은 해당 변에 상대적입니다. 가로 백분율은 너비에 상대적이고 세로는 높이에 상대적입니다. 넓고 짧은 상자에서 이는 모서리가 완벽한 호가 아닌 타원으로 늘어나는 것을 의미합니다.

출력이 모든 브라우저에서 작동합니까?

예——테두리 반지름 및 타원 구문은 Safari, Firefox, Edge 및 Chrome의 모든 상록 버전을 포함한 모든 최신 브라우저에서 지원됩니다.