border-radius

border-radius

테두리를 둥굴게 만드는 속성입니다.

 

1. 속성 8군데 길이를 정해야합니다.

 

 

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

2.대각선 방향으로 값이 같을 때 사용할 수 있습니다.

 

border-radius: aa bb aa bb / cc dd cc dd

 

border-radius: 40px 80px / 80px 40px;

 

3.네 곳이 모두 같을 때 사용할 수 있습니다.

border-radius: aa aa aa aa / bb bb bb bb

 

border-radius: 80px / 40px;

 

4.가로 방향과 세로 방향의 값이 같다면 앞에 부분만 쓸 수 있습니다.

 

border-radius: 20px 40px 60px 80px;

border-radius: aa bb cc dd / aa bb cc dd

슬래시앞이 수평 반지름 슬래시 뒤가 수직 반지름이고 술래시가 없을 경우 , 수평 수직 동일하게 적용 됩니다.

 

 

 

이 글은 www.codingfactory.net/10957 보고 만들었습니다(사진자료) 코딩 팩토리 감사합니다.

aboooks.tistory.com/287참고해서 만들었습니다.