웹 페이지를 만드는 과정에서 때로는 둥근 모서리 효과를 구현해야 할 수도 있습니다. 이전 방법은 디자인 초안을 쉽게 페이지로 만들 수 있는 그림으로 자르고 여러 배경 이미지를 사용하여 둥근 모서리를 구현하는 것이었습니다. CSS3가 등장한 후에는 이러한 문제가 발생하지 않습니다. CSS3는 아래와 같이 요소의 둥근 모서리 효과를 설정하는 일련의 속성을 제공합니다.
위 기능의 선택적 값은 다음 표에 나와 있습니다.
border-radius는 둥근 테두리를 구현하는 데 사용됩니다.
예:
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></ 본문></html>실행 결과:
하지만 border-radius를 150px로 설정하면 원형 테두리가 됩니다.
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></ 본문></html>실행 결과:
편의상 border-radius를 50%로 설정하면 됩니다. 효과는 동일합니다.
하지만 원을 그리려면 너비와 높이가 동일해야 합니다.
실제로 border-radius 이후에는 여러 속성 값이 연결될 수 있습니다. 위와 같은 속성 값의 경우 네 모서리가 이 속성 값으로 기본 설정됩니다. 상대적인 방법은 무엇입니까? 왼쪽 상단부터 시작하여 시계 방향으로 진행됩니다.
예:
<html><head><style>div{너비:300px;높이:300px;border:1pxsolidblack;배경:rgb(0,162,255);border-radius:50px0px20px100px;}</style></head><body><div ></div></body></html>실행 결과:
예를 들어 달걀을 그려보겠습니다.
<html><head><style>div{폭:80px;높이:100px;border:1pxsolidblack;배경:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;}</style></head><body> <div></div></body></html>실행 결과:
