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

CSS의 border-bottom-right-radius 속성을 사용하는 방법

silencement

풀어 주다： 2019-05-27 10:45:54

원래의

3000명이 탐색했습니다.

CSS의 border-bottom-right-radius 속성을 사용하는 방법

border-bottom-right-radius 속성 정의 및 사용법

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

border-bottom-right-radius 비슷한 속성

border-top-left-radius 속성: 왼쪽 위 모서리를 둥글게 또는 둥글게 설정합니다. other Shape;

border-bottom-left-radius 속성: 왼쪽 하단 모서리를 둥근 모서리 또는 다른 모양으로 설정합니다.

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

border-bottom-right-radius 속성 구문 형식

css 구문: 테두리 -오른쪽 상단 반경:5px 10px;

css 구문: 테두리-오른쪽-반경:6px;

css 구문: 테두리-오른쪽 반경: 30% 80%;# 🎜🎜#

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

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

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