shape-outside

 < shape-outside > 

❑ shape-outside를 사용할 수 있는 조건

⇨ float

⇨ 크기 속성

❑ shape-outside: 모양(값);

⇨ 모양: circle, ellipse(타원형), inset(안쪽), polygon(다각형)

shape-outside: circle(원크기 at 중심점 좌표(x축 y축));

shape-outside: circle(50% at 50% 50%);

 

body { font-family: sans-serif; font-size: 18px; }

.megaphone {
  float: left;
  margin-right: 10px;
  shape-outside: circle(50%);
}

.desktop {
  float: left;
  https://assets.codepen.io/485050/acme_logo2_1.png
  shape-outside: inset(40px 20px 40px 0);
}

.logo {
  float: left;
  margin-right: 30px;
/*   shape-outside: url(https://assets.codepen.io/485050/acme_logo2_1.png); */
  shape-outside: polygon(0 0, 200px 0, 255px 106px, 237px 147px, 251px 148px, 245px 170px, 258px 186px, 196px 215px, 0 215px)
}

 

background-clip: padding-box;

• border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.
• padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
• content-box : 내용 영역과 그 안쪽 영역을 채웁니다.