CSS의 border-top-right-radius 속성을 사용하는 방법
- silencement원래의
- 2019-05-27 14:12:073291검색
border-top-right-radius 속성 정의 및 사용법
CSS에서 border-top-right-radius 속성은 요소의 오른쪽 상단 모서리에 있는 테두리를 둥근 테두리로 설정하는 데 사용됩니다( 다른 모양일 수도 있음), 이 속성은 일반적으로 오른쪽 상단 모서리만 둥근 모서리로 설정할 때 사용됩니다. 요소의 네 모서리를 동시에 둥근 모서리로 설정하려는 경우 물론 이 속성을 사용할 수 있습니다. 이 속성(아래 유사 참조) 속성과 유사한 세 가지 다른 속성이 있지만 일반적으로 border-radius 속성을 선택합니다. border-radius 속성은 동일한 명령문에서 네 모서리의 설정을 정의할 수 있으므로 몇 줄을 절약할 수 있습니다. 코드를 작성하고 더 읽기 쉽게 만듭니다.
Border-top-right-radius 속성은
1.border-top-left-radius 속성과 유사합니다. 왼쪽 상단 모서리를 둥근 모서리 또는 다른 모양으로 설정합니다.
2.border-bottom -left-radius 속성: 왼쪽 하단 모서리를 둥근 모서리 또는 다른 모양으로 설정합니다.
3.border-bottom-right-radius 속성: 오른쪽 하단 모서리를 둥근 모서리 또는 다른 모양으로 설정합니다. 상단 오른쪽 반경 속성 구문 형식
1 .css 구문: border-top-right-radius:5px 10px
2.css 구문: border-top-right-radius:6px3.css 구문: border -상단 오른쪽 반경:30% 80%4.css 구문: border-top-right-radius:50%5.JavaScript 구문: object.style.borderTopRightRadius="5px"
border-top -right-radius 속성값 설명
border- top-right-radius 속성은 두 개의 속성값을 가집니다. 두 속성값이 동일할 경우 하나의 속성값을 생략해도 효과는 완전히 동일합니다. 두 개의 속성 값이 있는 경우: 첫 번째 속성 값은 오른쪽 상단 모서리 모양의 가로 반경을 나타내고, 두 번째 속성 값은 속성 값이 하나만 있는 경우 세로 반경을 나타냅니다. 오른쪽 상단 모서리 모양의 .
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-top-right-radius属性将右上角设置为圆角边框</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c{margin-top:10px;width:360px;border:2px solid #0000FF;padding: 16px;}
#a{border-top-right-radius:56px 36px;}
#b{border-top-right-radius:60px;}
#c{border-top-right-radius:20% 80%;}
</style>
</head>
<body>
<div id = "a">border-top-right-radius:56px 36px;</div>
<div id = "b">border-top-right-radius:60px;</div>
<div id = "c">border-top-right-radius:20% 80%;</div>
</body>
</html>실행 결과
위 내용은 CSS의 border-top-right-radius 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!