본문 바로가기
웹개발/웹개발

#CSS3 border-radius (2)

by 에르소 2014. 7. 15.


 CSS3 border-radius (2)



[두 곳만 둥글게 15px / 25px 표시한 이미지]


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>무제 문서</title>

</head>

<style>

div.rounded {

background-color: #666;

color: #fff;

line-height: 20px;

width: 350px;

height: 50px;

padding: 10px;

border: thin double #C90;

-webkit-border-bottom-left-radius:15px;

-moz-border-radius-bottomleft:15px;

-webkit-border-top-right-radius:

25px;

-moz-border-radius-topright:25px;

}

</style>

<body>

<div class="rounded">

HTML5 + CSS3 공부를 열심히 합시다<BR>


왼쪽 아래 모서리 15 픽셀만큼 둥글게 합니다.

<br>


오른쪽 아래 모서리 25 픽셀만큼 둥글게 합니다.


</div>

</body>

</html>




'웹개발 > 웹개발' 카테고리의 다른 글

#CSS3 Text-Shadow  (0) 2014.07.16
#CSS3 Border-radius 로 원 그리기  (0) 2014.07.15
#CSS3 border-radius (2)  (0) 2014.07.15
#CSS3 border-radius  (0) 2014.07.15
#CSS3 Property  (0) 2014.07.15
Devloper Android, Eclipse  (0) 2014.07.14

댓글0