Jam's story
[CSS] border-radius 본문
<!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>css 둥근 모서리
Lorem ipsum dolor.
Optio eveniet quisquam.
Sunt iure natus.
'WEB > CSS' 카테고리의 다른 글
| [CSS] 사원이미지 출력 (0) | 2022.05.26 |
|---|---|
| [CSS] 여러 배경이미지 (다중 배경) 추가 (0) | 2022.05.25 |
| [CSS] 아이콘에 스타일+ 막대그래프 +사원 이미지 (0) | 2022.05.25 |
| [CSS] 특수성(특이성) (0) | 2022.05.25 |
| [CSS] 검색창 만들기( 이미지 넣기, 크기늘리기) (0) | 2022.05.25 |
'WEB/CSS' Related Articles
more
Comments