CSS animation - How to fill in "starting from border"?

Question

Quite a simple question, really, however I could not find anything online.

Basically, how do you animate a fill-in with a specific color of an element starting at the border?

E.g the border gets bigger and bigger until the shape is filled.

Answer 1

如果我理解你的问题，你想要为元素的边框宽度设置动画，也许是border-top-width，但我不认为这会产生你正在寻找的效果，增加边框只会在边框宽度设置为的情况下按下元素，看起来不像元素是否被填充，你可以为覆盖外部元素的嵌套元素设置动画，你可以查看这个例子看看我是什么说

HTML：

<style>
#theBorderDiv, #theTwoDivs { 
 display: inline-block;
background-color: #CCC;
height: 0px;
width: 300px;
border-top-color: red;
border-top-style: solid;
border-top-width: 1px;
height: 200px;
vertical-align: top;
}

#theTwoDivs{
  margin-top: 200px;
  position: relative;
}

#theInnerDiv
{
  position: absolute;
  top:0px;
  height: 0px;
  width: 300px;
  background-color: red;
}    
</style>
<div id="theBorderDiv"></div>

<div id="theTwoDivs">    
 <div id="theInnerDiv"></div>
</div>

javascript：

 <script type="text/javascript">        
    $('#theBorderDiv').animate({borderTopWidth:200},1000)
    $('#theInnerDiv').animate({height:200},1000)
</script>