CSS - 테두리 반경

👋 나야! Ma-... 농담이야, Mario는 소프트웨어 개발자가 아니라 배관공이야... 맞지?

오늘의 주제

어쨌든 오늘은 매우 인기 있는 CSS 속성 -> border-radius에 대해 이야기하고 싶습니다. 이 속성을 사용하면 멋진 곡선 가장자리/모서리가 있는 멋진 요소를 만들 수 있습니다. 예를 들어 프로필 이미지나 버튼에 멋진 원형 테두리를 만드는 데 사용할 수 있습니다.

일반적인 사용법은 아래와 같이 모서리를 둥글게 하기 위해 하나의 인수를 백분율 또는 다른 단위로 사용하는 것입니다.

하나의 값

border-radius: 25px;

border-radius: 50%;

둘 이상의 인수

하지만 최근에는 더 많은 인수를 사용하여 개별 모서리를 더 잘 제어할 수 있다는 사실을 알게 되었습니다. 이것은 몇 가지 흥미로운 모양을 만들 수 있습니다!

서로 다른 수의 인수를 제공하는 것이 각 모서리의 원형에 어떤 영향을 미치는지 살펴보겠습니다. 그러나 먼저 아래 이미지를 살펴보십시오. 값이 모서리에 적용되는 순서를 보여줍니다. 왼쪽 상단에서 시작하여 시계 방향으로 왼쪽 하단으로 이동합니다.

두 값

두 값을 사용할 때 첫 번째 값은 TOP LEFT 및 BOTTOM RIGHT를 나타내고 두 번째 값은 TOP RIGHT 및 BOTTOM LEFT를 나타냅니다(위 그림에서 색상으로 구분한 것과 같음).

border-radius: 50px 20px;

세 가지 값

세 개의 값을 사용할 때 첫 번째 값은... TOP LEFT(항상 거기에서 시작함을 기억하십시오)를 나타내고, 두 번째 값은 TOP RIGHT 및 BOTTOM LEFT(한 쌍임)를 나타내고, 세 번째 값은 BOTTOM RIGHT를 나타냅니다.

border-radius: 50px 20px 100px;

네 가지 가치

어떤 4개의 값이 어느 모서리를 나타내는지 추측할 수 있습니다. 첫 번째 값은 왼쪽 상단을 나타내며 시계 방향으로 이동합니다.

border-radius: 10px 30px 50px 80px;

이것으로 각 모서리의 둥글기를 제어하는 ​​데 사용할 수 있는 기본 옵션을 마칩니다. 하지만 잠깐...더 있습니다! 😮

4개 이상의 값! 8가지 가치

🤯 각 모서리를 개별적으로 제어할 수 있을 뿐만 아니라 8개의 값(4/4)을 사용하면 각 타원의 가로 및 세로 축(반장축 및 반단축)을 제어할 수 있습니다(원은 타원) 경계 반경을 생성합니다. 이것은 약간 복잡해질 수 있지만 내 안의 수학 괴짜는 그것이 매우 매력적이라는 것을 알았고 더 많은 것을 배우기 위해 타원 방정식과 CSS 경계 반경을 가지고 놀면서(그래프로) 시간을 보냈습니다. 재미있었습니다.

슬래시 왼쪽에 있는 모든 값은 타원의 가로 축을 나타내고 슬래시 오른쪽에 있는 해당 값은 세로 축을 나타냅니다.

참고: 하나의 값이 모든 모서리에 적용되므로 여기서는 타원의 모든 가로 축을 100px로, 세로 축을 20px로 설정합니다.

border-radius: 100px / 20px;

수평 및 수직에 대해 서로 다른 값을 제공하면 모서리의 "둥근 정도"가 약간 어긋나 보이는 것을 볼 수 있습니다. 이는 타원 때문입니다. 위에서 언급했듯이 원은 장축과 부축의 길이가 같은 특별한 유형의 타원입니다. 즉, 수평 및 수직 값을 동일하게 설정하면 멋진 원형 테두리 반경을 얻을 수 있습니다.

참고: 여기에서는 세 번째와 네 번째 모서리에 값 0을 사용하여 명확한 비교를 볼 수 있습니다. 슬래시의 오른쪽 값을 생략하면 왼쪽과 동일한 값을 사용한다는 것을 알 수 있습니다.

border-radius: 100px 50px 0 0/ 20px 50px;

요약

이를 통해 각 모서리가 완전히 멋지고 둥글거나 모양이 구부러져 있는지 여부에 관계없이 각 모서리가 어떻게 보이는지 완전히 제어할 수 있습니다. 멋진 블롭과 같은 모양으로 끝날 수 있습니다. 아래를 참조하십시오.



이에 대해 자세히 알아보기 위해 Border Radius Playground에서 영감을 받은 프로젝트8 point full control를 만들었습니다. 특히 각 포인트의 값이 컨테이너의 크기보다 훨씬 클 수 있는 경우 px를 사용하면 최종 모양에 어떤 영향을 미치는지 확인하고 싶었습니다. border-radius에 대한 설명서를 읽고 이 도구를 사용하여 멋진 테두리에 대한 백분율 border-radius를 생성하려면 "8 Point Full Control"을 확인하십시오!