如何在两种边框样式之间创建过渡？

Question

那么如何将一种边框样式转换为另一种边框样式。假设在悬停时将虚线边框淡化为实心边框。不可能使用标准CSS。

Answer 1

实际上，我已经解决了这个问题，并认为将它分享给其他人可能也很有用。

以下是如何将2种边框样式从一种转换为另一种的工作示例。

HTML：

<div></div>

CSS：

div{
  width: 300px;
  height: 300px;
  background: black;
  border: 5px dashed green;
  border-radius: 40px;
  transition: all 0.3s ease;
  position: relative;
}

div::before{
  content:'';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  box-shadow: inset 0 0 0 5px transparent;
  box-sizing: border-box;
  border-radius: 40px;
  transition: all 0.3s ease;
}
div:hover::before{
  box-shadow: inset 0 0 0 5px green;
}

样本： http://codepen.io/anon/pen/KwYPrx