4.8 練習

一、正方形與圓形的切換

提供 html：

<button type="button" id="btn">按鈕</button>
<div class="img_block"><img src="https://picsum.photos/id/222/200/200"></div>

提供 CSS：

div.img_block{
  border: 1px solid red;
  width: 100px;
  height: 100px;
  font-size: 0;
  overflow: hidden; /* visible(預設) | hidden | scroll | auto */
  transition: border-radius 1s;
  
/*   border-radius: 50%; */
}
div.img_block > img{
  width: 100%;
}

結果示意：

參考作法：