CSS3 기초) border-radius 속성 정리

 

 

 

 

{ border-radius : ; }

 

 

 

각진 모서리의 박스나 이미지 등

모든 요소의 모양을 둥글게만들어 준다

(table 요소에는 적용이 안됨)

 

 

 

---

 

 

값 적용 방향 및 방법

 

기본적으로 사각형의 각 모서리에

11, 1, 5, 7시 방향으로 적용됨

(*padding의 대각선 버전)

 

 

 

 

1. 방향별 입력 방법

 

 

ⓐ 30px;

네 방향 모두 적용

 

 

ⓑ 30px 20px;

11, 5시 / 1시, 7시

대각선 방향의

상하 / 좌우로

적용

 

 

ⓒ 10px 20px 5px;

11시 / 7,1시 / 5시

상 / 좌우 / 하 적용

 

 

ⓓ 10px 20px 30px 5px;

11/1/5/7시 방향으로 적용

상우하좌

div { border-radius : 210px 15px; width:300px; height: 300px; 
      border: 1px solid purple; background: red; }

 

안녕? 나는 레몬이야

 

---

 

2. 특정 방향 지정 입력 방법

 

Y 축을 먼저 입력, 후에 x축 입력

 

p { border-top-left-radius : 20px; 
    border-top-right-radius : 50px; 
    border-bottom-left-radius : 70px; 
    border-bottom-right-radius : 60px;
  }

 

 

---

 

 

원 만들기

 

이미지나 박스의

가로 세로 사이즈와

동일한 값을 넣어주면 된다.

 

 

 

반원(소세지) 모양

 

높이 크기만큼 값을 주면 된다

 

 

---

 

 

디자이너에게 psd로

시안을 받았을 때

사이즈 확인 잘 하자