CSS를 사용하여 div 모서리를 둥글게 만드는 방법

12045 단어 webdevcsstutorialhtml

HTML div 요소의 서로 다른 가장자리에 서로 다른 곡률 반경을 할당할 수 있다는 것을 알고 계셨습니까?



오늘은 CSS를 사용하여 HTML 요소의 모서리를 쉽게 둥글게 만드는 방법을 보여드리고자 합니다. 😊

시작하기 전에 웹 사이트에서 솔루션에 대한 실행 가능한 예제를 확인하는 것이 좋습니다.
How to round div corners using CSS

최종 효과:

둥글게 하려는 모서리에 따라 요소를 둥글게 하는 방법에는 여러 가지가 있습니다.

동일한 값으로 각 모서리를 둥글게



이 솔루션에서는 하나의 값이 있는 border-radius 속성을 사용하여 주어진 값으로 div의 각 모서리를 둥글게 만듭니다.

실제 예:

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 25px; /* <---------- use this to round all corners in div */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>


이 예제를 실행할 수 있습니다here.

대각선 반대쪽 모서리를 둥글게



이 솔루션에서는 두 개의 값이 있는 border-radius 속성을 사용하여 두 개의 다른 값으로 div의 대각선 반대쪽 모서리를 둥글게 만듭니다.

실제 예:

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 25px 45px; /* <---------- use this to round the opposite corners */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>


이 예제를 실행할 수 있습니다here.

다른 값으로 각 모서리를 둥글게



이 솔루션에서는 4개의 값이 있는 border-radius 속성을 사용하여 시계 방향으로 다른 값으로 div의 각 모서리를 둥글게 만듭니다.

실제 예:

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 10px 30px 20px 40px; /* <----- use this to round all corners in div */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>


이 예제를 실행할 수 있습니다here.

맞춤형 둥근 모서리



이 솔루션에서는 세 가지 값이 있는 border-radius 속성을 사용하여 다음과 같은 방식으로 div의 모서리를 둥글게 만듭니다.
  • 첫 번째 값은 왼쪽 위 모서리를 설명합니다. - 20px 반지름,
  • 두 번째 값은 반대쪽 상단 오른쪽 및 하단 왼쪽 모서리를 나타냅니다. - 45px 반지름,
  • 세 번째 값은 오른쪽 아래 모서리 - 30px 반경을 나타냅니다.

    • 실제 예:

    <!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 20px 45px 30px; /* <---------- use this to round corners*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>


    다음과 같이 주어진 값으로 둥글게 할 모서리를 수동으로 지정할 수도 있습니다.

    <!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-top-left-radius: 25px; /* <----- top-left corner round      */
        border-top-right-radius: 30px; /* <----- top-right corner round     */
        border-bottom-right-radius: 40px; /* <----- bottom-right corner round  */
        border-bottom-left-radius: 50px; /* <----- bottom-left corner round   */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>


    이 예제를 실행할 수 있습니다here.

    서클 div 예



    백분율 값과 함께 border-radius 속성을 사용할 수도 있습니다. 이 솔루션에서는 속성 값을 50%로 설정하여 원 div를 만들었습니다.

    실행 가능한 예:

    <!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 100px;
        background-color: #b5edc2;
        border-radius: 50%; /* <------ use this to make circle div (NOTE: height=width) */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>


    이 예제를 실행할 수 있습니다here.

    이 솔루션이 유용하다고 생각되면 댓글 섹션에 알려 주시거나 반응을 남겨주세요 💗🦄💾.
    읽어주셔서 감사하고 다음 게시물에서 뵙겠습니다! 😊🔜


    우리에게 쓰기! ✉



    해결해야 할 문제가 있거나 React 또는 JavaScript 주제와 관련하여 아무도 대답할 수 없는 질문이 있거나 멘토링을 찾고 있는 경우 dirask.com -> Questions에 문의하십시오.

    코딩 팁과 요령을 다른 사람들과 공유하는 당사facebook group에 가입할 수도 있습니다! 🔥
    메모지
    Python de 3DCAD ~ Spline Surface ~

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage