需求是这样的，需要一个圆柱实现展示内存的占用变化。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.column{position: relative;width: 300px;height: 100px;border-left: 1px gray solid;border-right: 1px gray solid;margin: 100px auto;background-color: #00AFE9;}.column:before{position: absolute;content: '';display: block;height: 20px;width: 100%;border: 1px solid;border-radius: 50%;top: -10.5px;z-index: 1;}.column:after{position: absolute;content: '';display: block;height: 20px;width: 100%;border-bottom: 1px solid;border-radius: 50%;bottom:-10px;background-color: #00AFE9;}.inner1{position: relative;width: 100%;height: 50px;background-color: white;text-align: center;}.inner1:after{position: absolute;content: '';display: block;height: 20px;width: 100%;border-radius: 50%;background-color: white;bottom: -10px;}.inner1 h5{position: absolute;top: 0;left: 50%;transform: translateX(-50%);z-index: 1;}</style>
</head>
<body>
<div id="app"><div class="column"><div class="inner1" :style="getHeight()"><h5>{{msg}}G/1T</h5></div></div><button @click="add">增加</button>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script>let vm=new Vue({el:'#app',data(){return{msg:0}},methods:{getHeight(){let num=null;num=this.msg/1025;num=100-(num*100);return{height: num+'px'}},add(){ this.msg+=100}}})
</script>
</body>
</html>
按钮的作用是更加方便观看效果。这里引入了vue.js
原生也是可以轻松实现的 要是想要稍微一点的效果 还可以加上
transition 设置动画
