<div> 태그 등으로 만드는 박스의 모서리를 둥글게 라운딩 처리하는 방법을 알아보겠습니다.
border-radius:
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
CSS 박스의 배경에 그라데이션 넣기
태그로 만든 박스의 배경을 한가지의 단색이 아닌, 두가지의 색을 이용해서 그라데이션 효과를 주는 방법을 알아봅시다. background: linear-gradient( ) gradation 위의 소스 코드는 PC에서 드
gogogameboy.tistory.com
이 포스트에서 올린 코드에서 살짝 변형을 줬습니다.
박스의 CSS 스타일에 border-radius: 를 추가해서 픽셀 값을 넣어주시면 됩니다.
radius
위의 소스 코드로 이와 같은 모서리가 부드럽게 처리된 박스가 만들어졌습니다.
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 박스의 안쪽에 그림자 넣기 (0) | 2021.02.19 |
|---|---|
| CSS 박스에 그림자 넣기 (0) | 2021.02.17 |
| CSS 박스의 배경에 그라데이션 넣기 (0) | 2021.02.12 |
| CSS, 같은 페이지의 특정 위치로 링크시에 컬러 변화 (0) | 2021.02.10 |
| CSS 리스트 태그의 번호 디자인 변경 (0) | 2021.02.08 |
댓글