로그인  회원가입  
인포앤북 홈

2-5. 박스 속성

border-radius 속성은 박스의 모서리를 둥글게 만드는 데 사용됩니다.

둥근 모서리 사각형
ex2-9.html
<style>
{ 
line-height: 200%;
padding: 30px;
border: solid 2px pink; 
border-radius: 20px;
}
</style>
<body>
<p>웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. 
        CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있다.</p>        
</body>
ex2-9.html의 실행 결과

다음 예제를 통하여 박스의 모서리를 둥글게 만드는 방법에 대해 공부합니다.

박스 그림자
ex2-10.html
<style>
div { 
width: 500px;
border: solid 1px skyblue;
padding: 20px;
box-shadow: 5px 5px 10px #888888;
}
</style>
<body>
    <div>
        <h3>박스 모델</h3>
    <p>웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. 
        CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있다.</p>  
    </div>    
</body>
ex2-10.html의 실행 결과