반응형
둥근 테두리(border-radius)
1) 디테일하게 설정하는 법
선택자{border-radius: top-left-x top-right-x bottom-right-x bottom-left-x/
top-left-y top-right-y bottom-right-y bottom-left-y}
[예시]
<style>
div {
width: 200px;
height: 200px;
margin: 20px;
display: inline-block;
}
.radius1 {
border: 3px solid pink;
border-radius: 100px 100px 50px 50px / 30px 30px 100px 100px;
}
</style><body>
<h2>둥근 테두리</h2>
<div class="radius1"></div>
</body>
[결과]
2) 간단하게 설정하는 법
선택자{border-radius: top-x bottom-x / top-y bottom-y}
선택자{border-radius: xy}
[예시]
<style>
div {
width: 200px;
height: 200px;
margin: 20px;
display: inline-block;
}
.radius2 {
border: 3px solid blue;
border-radius: 100px/50px;
}
.radius3{
border: 3px solid greenyellow;
border-radius: 150px;
}
</style><body>
<div class="radius2"></div>
<div class="radius3"></div>
</body>
[결과]
[내가 만든 사이트에 적용한 예시]
마켓 상세페이지 네모를 둥글게 만들었다 :)
#brown{
background-color: rgb(82, 63, 22);
width: 130px;
padding: 5px;
text-align: center;
color: white;
font-size: 20px;
text-decoration-line: none;
border-radius: 10px;
}
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 12 CSS display (0) | 2021.05.03 |
|---|---|
| 11 테이블 테두리 변경하기(border-collapse) (0) | 2021.05.03 |
| 09 박스모델(BOX MODEL)과 박스 사이징 (0) | 2021.05.03 |
| 08 CSS의 배경 (0) | 2021.04.27 |
댓글