从上到下然后向左绘制边框

【问题标题】：Draw a border top to bottom and then left从上到下然后向左绘制边框
【发布时间】：2019-01-06 13:11:23
【问题描述】：

我想使用 CSS 过渡从上到下绘制边框。像：从左到右扩展边框。

示例：我有一张图片。当我点击图片时，一条线从上到下移动，从右到左移动。

【问题讨论】：

【解决方案1】：

我认为您正在寻找这种效果。您可以在此处查看演示：

img {
  width: 100px;
  height: 100px;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 4s;
}

img:hover {
  width: 300px;
  height: 300px;
}

<h1>Transition</h1>
<img src="https://lh3.googleusercontent.com/VT-PqxMMsA2wPy7kzmuKGDIzaA3AGuXKExqnfOfwTEy5AvLIMTranbfNGheRr457RD4=s180">

【讨论】：