CSS로 버튼 둥근 스타일의 표시 효과를 얻는 방법(예)

웹 디자인 과정에서 일반적인 라벨 속성의 기본 효과는 그다지 아름답지 않습니다. 예를 들어 버튼 스타일, 기본 상태는 매우 평범하고 미적인 느낌이 없습니다. 그래서 이번 글에서는 CSS 설정 버튼 스타일의 둥근 버튼 효과에 대한 관련 작업 예시를 소개하겠습니다.

코드는 다음과 같습니다:

<div style="width:100px;height:50px;background-color:red;border-radius:15px;">

또는

<input type="button" value=" " style="border-radius:5px;" />

효과는 다음과 같습니다:

#🎜🎜 #

위 코드를 읽어보니 아주 간단하다는 생각이 드시나요? 실제로 HTML에서 둥근 사각형 버튼 스타일을 설정하는 핵심은 CSS의 border-radius

속성입니다. 이 속성의 필수 사용법을 익히면 div, 그림 또는 테두리 버튼의 둥근 모서리를 쉽게 설정할 수 있습니다.

핵심 지식 포인트 소개: border-radius 속성은 최대 4개의 border -*- radius 속성을 지정할 수 있는 복합 속성입니다. 이 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다!

border-radius: 1-4 length|% / 1-4 length|%;

각 반경에 대한 네 가지 값의 순서는 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리입니다. 왼쪽 아래 모서리를 생략하면 오른쪽 위 모서리도 동일합니다. 오른쪽 아래 모서리를 생략하면 왼쪽 위 모서리도 동일합니다. 오른쪽 위 모서리가 생략되면 왼쪽 위 모서리도 동일합니다.

그러면 CSS 버튼의 둥근 모서리 스타일 설정에 대한 이 글의 소개가 도움이 필요한 친구들에게 도움이 될 것입니다.

위 내용은 CSS로 버튼 둥근 스타일의 표시 효과를 얻는 방법(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!