티스토리 뷰

DEVELOPE/CSS

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

소찾나 2017. 11. 30. 10:53
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

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

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

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



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


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





1 border-radius 처리하기


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


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


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


ex) border-radius: 50%;


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
<!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>
cs




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


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


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

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

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

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


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>
cs


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


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

'DEVELOPE > CSS' 카테고리의 다른 글

css text-shadow 속성 및 사용  (0) 2017.12.04
css box-shadow 속성  (0) 2017.12.02
CSS 외각선 형식  (0) 2017.11.11
CSS 외부파일 불러오기  (0) 2017.10.27
CSS DIV 속성 position  (0) 2017.10.27
공유하기 링크
댓글