CSS 스타일로 버튼을 둥글게 만드는 방법
- 藏色散人원래의
- 2021-02-28 10:17:288497검색
CSS 스타일을 사용하여 버튼을 둥글게 만드는 방법: 먼저 HTML 샘플 파일을 만든 다음 버튼 버튼을 정의하고 마지막으로 CSS의 "border-radius" 속성을 통해 버튼의 네 모서리를 둥근 모서리로 설정합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
버튼을 원으로 바꿉니다(라디안 포함)
border-radius는 버튼을 원으로 바꾸거나 p
border-radius에 라디안 테두리를 추가할 수 있습니다. 규칙:
하나의 값: 4 둥근 모서리는 동일한 값을 갖습니다
두 개의 값: 첫 번째 값은 왼쪽 위 모서리와 오른쪽 아래 모서리이고, 두 번째 값은 오른쪽 위 모서리와 왼쪽 아래 모서리입니다.
세 가지 값: 첫 번째 값은 왼쪽 위입니다. 모퉁이, 두 번째 값은 오른쪽 위 모서리, 왼쪽 아래 모서리, 세 번째 값은 오른쪽 아래 모서리입니다.
4개 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리, 세 번째 값은 오른쪽 위 모서리입니다. 는 오른쪽 아래 모서리이고 네 번째 값은 왼쪽 아래 모서리 뿔입니다.
style : :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
width: 100px;
height: 30px;
background: green;
border: none;
color: white;
margin: 6px 10px;
}
.btnStyle1{
border-radius: 6px;
}
.btnStyle2{
border-radius: 26px 6px;
}
.btnStyle3{
border-radius: 6px 26px 60px;
}
.btnStyle4{
border-radius: 6px 126px 236px 346px;
}
.bolder{
border: solid 1px green;
width: 500px;
height: 40px;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="bolder">
<button class="btn btnStyle1">按钮1</button>
<button class="btn btnStyle2">按钮2</button>
<button class="btn btnStyle3">按钮3</button>
<button class="btn btnStyle4">按钮4</button>
</p>
</body>
</html>aSometimes Border-Radius는 실패 할 것입니다 : 전능하신! 중요;
add 
border-radius: 6px !important;!important는 일반적으로 iE 6을 제외한 하위 버전에 사용됩니다. 해킹에 사용됩니다. CSS에는 상속된 스타일이 있기 때문에 브라우저가 이 명령문을 먼저 실행할 수 있도록 하는 !important CSS 문이 이어집니다. !importanrt를 추가하면 상위 스타일이 재정의될 수 있습니다.
추천: "HTML 비디오 튜토리얼
"
위 내용은 CSS 스타일로 버튼을 둥글게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.