CSS의 border-top-left-radius 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS의 border-top-left-radius 속성을 사용하는 방법

silencement

풀어 주다： 2019-05-27 10:47:49

원래의

3482명이 탐색했습니다.

CSS의 border-top-left-radius 속성을 사용하는 방법

border-top-left-radius 속성 정의 및 사용법

CSS에서 border-top-right-radius 속성은 요소의 오른쪽 상단 모서리에 있는 테두리를 둥근 테두리로 설정하는 데 사용됩니다( 다른 모양일 수도 있음), 이 속성은 일반적으로 오른쪽 상단 모서리만 둥근 모서리로 설정할 때 사용됩니다. 요소의 네 모서리를 동시에 둥근 모서리로 설정하려는 경우 물론 이 속성을 사용할 수 있습니다. 이 속성(아래 유사 참조) 속성과 유사한 세 가지 다른 속성이 있지만 일반적으로 border-radius 속성을 선택합니다. border-radius 속성은 동일한 명령문에서 네 모서리의 설정을 정의할 수 있으므로 몇 줄을 절약할 수 있습니다. 코드를 작성하고 더 읽기 쉽게 만듭니다.

Border-top-left-radius 속성은

border-top-left-radius 속성과 유사합니다. 왼쪽 상단 모서리를 둥근 모서리 또는 다른 모양으로 설정합니다.

border-bottom-left-radius 속성 : 왼쪽 하단 모서리를 원형 모서리 또는 다른 모양으로 설정

border-bottom-right-radius 속성: 오른쪽 하단 모서리를 둥근 모서리 또는 다른 모양으로 설정

border-top-left-radius 속성 구문 형식

css 구문: border-top-right-radius:5px 10px

css 구문: border-top-right-radius:6px

css 구문: border-top-right-radius:30% 80%

css 구문 : border-top-right-radius:50%

JavaScript 구문: object.style.borderTopRightRadius="5px"

border-top-left-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-left-radius 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!