7. border-radius, background-color, box-shadow

border-radius

border-radius 속성을 통해 모서리를 둥글게 만들 수 있습니다.

p{
	border: 3px solid red;
	border-radius: 10px;
}

값이 커질 수록 더욱 둥글어집니다.

 

또한 각 모서리를 개별 설정할 수 있습니다.

p{
	border: 3px solid red;
	border-top-left-radius: 5px; /* 왼쪽 위 */
  border-top-right-radius: 10px; /* 오른쪽 위 */
  border-bottom-right-radius: 20px; /* 오른쪽 아래 */
  border-bottom-left-radius: 0px; /* 왼쪽 아래 */
}

 

 

background-color

background-color 속성을 통해 배경생을 지정할 수 있습니다.

p {
	background-color: rosybrown;
}

/* 전체 배경색 설정 */
body {
	background-color: gray;
}

/* 투명한 배경색은 transparent이고 기본값으로 설정됩니다. */
h1 {
	background-color: transparent;
}

 

 

box-shadow

box-shadow 속성을 통해 요소에 그림자를 지정합니다.

가로와 세로 위치를 설정해줘야 합니다.

p {
	width: 300px;
	height: 300px;
	box-shadow: 30px 60px;
}

 

box-shadow 속성에 색을 추가할 수 있다.

p {
	width: 300px;
	height: 300px;
	box-shadow: 30px 60px gray;
}

 

box-shadow 속성에서 색상 앞에 그림자를 얼마나 흐릴지 설정할 수 있다.

p {
	width: 300px;
	height: 300px;
	box-shadow: 30px 60px 10px gray;
}

 

그림자의 흐림 속성 뒤에 그림자가 얼마나 퍼질지도 설정할 수 있다.

p {
	width: 300px;
	height: 300px;
	box-shadow: 30px 60px 10px 15px gray;
}

 

 

 

 

 

 

---

https://www.instagram.com/p/Ca4VSIIpxDD/?utm_source=ig_web_copy_link

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

---