Jam's story

[CSS] border-radius 본문

WEB/CSS

[CSS] border-radius

애플쩀 2022. 5. 25. 16:37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
p{
width:200px;
height:200px;
border:1px solid green;
padding:20px;
}
p:first-of-type{
background-color: green;
border-radius: 15px 50px 30px 5px;

}
p:nth-of-type(2){
background: url('../images/paper.gif') left top repeat;
border-radius: 50%;
}
p:last-child{
/* first-child는 h3이어서 안되지만 이것은 body의 마지막자식이 p이니 가능
p:nth-of-type(3) , p:last-of-type
 */
border: 2px solid #73da21;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;

}
</style>
</head>
<body>
<h3>css 둥근 모서리</h3>
<p>Lorem ipsum dolor.</p>
<p>Optio eveniet quisquam.</p>
<p>Sunt iure natus.</p>
</body>
</html>
Insert title here

css 둥근 모서리

Lorem ipsum dolor.

Optio eveniet quisquam.

Sunt iure natus.

Comments