티스토리 뷰
border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래;
css
div { width:300px; height:300px; float:left; margin:50px; background:lightblue; }
div:nth-child(1) { border-radius: 0px 10px 20px 40px; }
div:nth-child(2) { border-radius: 150px; }
● 넓이 값이 300px 이므로 각 모서리의 곡률을 150px 만큼 설정하면 정사각형에서 정원으로 변형 시킬 수 있다.
'CSS' 카테고리의 다른 글
| CSS: 선택자(Selector) 이해 (0) | 2017.05.10 |
|---|---|
| word-wrap 와 word-break 줄바꿈 속성 (0) | 2017.02.02 |
| 반응형 HTML CSS 오픈프레임워크 :: 부트스트랩 (0) | 2017.01.25 |
| text-shadow , box-shadow (0) | 2017.01.06 |
| nth-child() (0) | 2017.01.05 |
댓글