이미지에 멋진 테두리를 만듭니다.

최근 카드 UI의 일부 이미지에 이상한 모양의 테두리를 만들어야 했습니다. 대부분의 경우 Photoshop이나 다른 이미징 소프트웨어에서 이러한 이미지를 만들 것입니다. 그래서 경계 반경과 그 고급 기능에 대해 알아봤습니다.



대부분의 개발자는 CSS에서 border-radius를 적용하여 둥근 모서리를 얻을 수 있다는 것을 알고 있습니다.



여기에 10%와 20%인 경계 반경에 대한 2개의 값이 있습니다.

그러나 최대 8개의 값을 가질 수 있습니다. 아래는 경계 반경 값에 대한 구성 목록과 적용 방법입니다.

/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

위의 값은 MDN 웹 문서https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius에서 가져온 것입니다. 여기서 그들은 이러한 값이 어떻게 적용되는지 설명하려고 합니다. 그러나 문제는 하나의 모서리에 두 개의 값을 적용할 때입니다. 이것은 매우 혼란스럽게 만듭니다. 이 구성은 단일 '/'(슬래시)로 값을 구분하여 이루어집니다. 이 구성을 사용하면 다음과 같은 복잡한 테두리를 만들 수 있습니다.


이에 대해 자세히 설명하는 기사가 있습니다https://9elements.com/blog/css-border-radius/.

그러나 이것을 실제로 어떻게 사용할 수 있습니까?

8가지 값 구성으로 정수리부터 의미 있는 모양을 만들려면 천재여야 한다는 결론에 이르렀다. 하지만 다행스럽게도 여기에서 사용할 수 있는 테두리 반경 생성기가 있습니다https://9elements.github.io/fancy-border-radius/.



여기에서 작은 핸들을 사용하여 테두리를 그래픽으로 조정할 수 있으며 테두리 반경 값을 복사하여 CSS 스타일에 붙여넣을 수 있습니다.