CSS border-radius 모서리 부드럽게 처리및 원그리기

DEVELOPE/CSS

CSS border-radius 모서리 부드럽게 처리및 원그리기

소찾나 2017. 11. 30. 10:53

CSS border-radius 모서리 부드럽게 처리및 원그리기

보통 웹상의 상자 모서리 처리를 위해서는 그래픽을 이용하거나 자바스크립트를 이용하여 처리하곤 하였으나

css3 에선 상자의 모서리 처리를 손쉽게 할 수 있도록 하는 border-radius 속성이 추가 되었다.

1 border-radius 처리하기

border-radius 속성으로 둥굴게 처리하기

상자의 굴곡처리는 값에 따라 자유롭게 조절이 가능합니다. 굴곡을 10px; 로 처리해본 테스트 페이지 입니다.

굴곡의 조종은 px 단위 뿐만아니라 상대적인 수치인 % 로 지정하는것도 가능합니다.

ex) border-radius: 50%;

<!DOCTYPE html>
<html>
<head>
<title>html5 css3 radius</title>
<style>
.radius-test { 
    
     width:500px;
     background-color:#777;
     line-height: 20px;
     color:#ffffff;
     text-align:center;
     padding: 10px;
     border-radius: 10px;
}
 
 
</style>
</head>
</head>
<body>
 
<div class="radius-test">
 
상자의 굴곡처리는 border-radius 로 쉽게 처리 할 수 있어요!                                         
 
</div>
</body>
</html>

Colored by Color Scripter

2 border-radius 원하는 테두리만 지정하기

원하는 테두리만 지정하거나 각기 다르게 지정할 경우에 아래와 같이 사용할 수 있습니다.

   border-top-left-radius: 3px;
   border-top-right-radius: 3px;

   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;

3 border-radius 응용 원그리기

border-radius 를 테두리를 부드럽게 처리하는것뿐 아니라 값을 조절하면 원을 그릴 수 있다.

border-radius: 200px; -> 지금이 200px 인 원을 그릴 수 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>html5 css3 radius</title>
<style>
.radius-test { 
    
     width:200px;
     height:200px;
     background-color:#777;
     line-height: 20px;
     color:#ffffff;
     text-align:center;
     padding: 10px;
     border-radius: 200px;
}
body { 
     
    background-color:#000;                                                                          
}
 
 
</style>
</head>
</head>
<body>
 
<div class="radius-test">
 
radius 원그리기
 
</div>
</body>
</html>
Colored by Color Scripter
cs

이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^