CSS로 테두리를 설정하는 방법은 무엇입니까? 웹 페이지의 프런트 엔드를 개발할 때 웹 페이지의 내용을 더 편안하게 만들기 위해 버튼과 같은 둥근 테두리를 설정해야 하는 경우가 많습니다. 그러면 둥근 테두리를 어떻게 설정합니까? 이 기사에서는 CSS에서 둥근 테두리를 설정하는 방법을 소개합니다.
CSS에서 둥근 테두리를 설정하는 가장 일반적이고 간단한 방법은 border-radius 속성을 사용하는 것입니다.
CSS 둥근 모서리에는 border-radius("테두리 반경"을 의미) 속성 하나만 설정하면 됩니다. 네 모서리의 반경을 동시에 설정하려면 이 속성에 값을 제공합니다. em, ex, pt, px, 백분율 등 모든 합법적인 CSS 측정을 사용할 수 있습니다.
둥근 테두리를 설정하는 CSS 코드 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px;
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>효과는 다음과 같습니다.
border-radius는 동시에 1~4개의 값을 설정할 수 있습니다.
값을 설정하면 4개의 필렛 모두 이 값을 사용한다는 의미입니다.
css 둥근 테두리 코드: border-radius: 15px;
두 개의 값을 설정하면 왼쪽 상단과 오른쪽 하단이 첫 번째 값을 사용한다는 의미입니다. 두 번째 값은 오른쪽 위 모서리와 왼쪽 아래 모서리에 사용됩니다.
css 둥근 테두리 코드: border-radius: 15px 5px;
세 개의 값이 설정되면 왼쪽 위 모서리가 첫 번째 값을 사용하고 오른쪽 위 모서리와 왼쪽 아래 모서리가 두 번째 값을 사용한다는 의미입니다. 값, 오른쪽 하단은 세 번째 값인 3개의 값을 사용합니다.
css 둥근 테두리 코드: border-radius: 15px 5px 25px;
4개의 값이 설정된 경우 순서대로 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리에 해당합니다(시계 방향 순서).
css 둥근 테두리 코드: border-radius: 15px 5px 25px 0px;
border-radius는 슬래시를 사용하여 두 번째 값 세트를 설정할 수도 있습니다. 첫 번째 값 세트는 수평 반경을 나타내고 두 번째 값 세트는 수직 반경을 나타냅니다. 두 번째 값 집합도 동시에 1~4개의 값을 설정할 수 있으며 적용 규칙은 첫 번째 값 집합과 동일합니다.
4개의 둥근 모서리를 동시에 설정하는 것 외에도 각 모서리를 개별적으로 설정할 수도 있습니다. 네 모퉁이에 대응하여 CSS3은 네 가지 별도의 속성을 제공합니다:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
이 네 가지는 각각 속성은 동시에 1~2개의 값으로 설정할 수 있습니다. 값을 1로 설정하면 수평 반경과 수직 반경이 동일하다는 의미입니다. 2개의 값을 설정한 경우 첫 번째 값은 가로 반경을 나타내고 두 번째 값은 세로 반경을 나타냅니다.
위는 CSS에서 둥근 테두리를 설정하는 방법입니다. CSS 테두리 속성에 대해 더 알고 싶다면 css 매뉴얼을 참조하세요.
위 내용은 CSS에서 둥근 테두리를 설정하는 방법은 무엇입니까? CSS에서 둥근 테두리를 설정하는 방법(이미지 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
두 개의 이미지와 API : 제품을 다시 칠하는 데 필요한 모든 것Apr 15, 2025 am 11:27 AM최근에 제품 이미지의 색상을 동적으로 업데이트하는 솔루션을 찾았습니다. 따라서 제품 중 하나만 사용하여 다른 방식으로 색칠 할 수 있습니다.
주간 플랫폼 뉴스 : 제 3 자 코드, 수동 혼합 콘텐츠, 가장 느린 연결이있는 국가의 영향Apr 15, 2025 am 11:19 AM이번 주에 라운드 업, Lighthouse는 타사 스크립트에 빛을 비추고 불안한 자원이 안전한 사이트에서 차단되고 많은 국가 연결 속도가 차단됩니다.
직접 비자 스크립트 기반 분석을 호스팅하는 옵션Apr 15, 2025 am 11:09 AM사이트에서 방문자 및 사용 데이터를 추적하는 데 도움이되는 분석 플랫폼이 많이 있습니다. 아마도 널리 사용되는 Google 웹 로그 분석
그것은 모두 헤드에있는 모든 것 : React Helmet과 함께 React 전원 사이트의 문서 헤드 관리Apr 15, 2025 am 11:01 AM문서 헤드는 웹 사이트에서 가장 화려한 부분이 아닐 수도 있지만 웹 사이트의 성공에 중요합니다.
JavaScript의 Super () 란 무엇입니까?Apr 15, 2025 am 10:59 AMSuper ()?를 호출하는 JavaScript를 볼 때 어떤 일이 발생 하는가. 아동 클래스에서는 Super ()를 사용하여 부모의 생성자와 Super를 호출합니다. 그것의 접근
다양한 유형의 기본 JavaScript 팝업 비교Apr 15, 2025 am 10:48 AMJavaScript에는 사용자 상호 작용을위한 특수 UI를 표시하는 다양한 내장 팝업 API가 있습니다. 뛰어나게:
액세스 가능한 웹 사이트를 구축하기가 어려운 이유는 무엇입니까?Apr 15, 2025 am 10:45 AM나는 다른 날에 많은 회사들이 액세스 가능한 웹 사이트를 만드는 데 어려움을 겪고있는 이유에 대해 다른 프론트 엔드 사람들과 대화를 나누고있었습니다. 액세스 가능한 웹 사이트가 왜 그렇게 어려운가
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
