在牛腩视频中，牛腩老师是通过截取一个现成的图片，然后通过5部分的方法设计的圆角矩形框，这种方法是对图片img的设计，跟着牛腩老师的步骤可以很好的实现这个样式。通过了解原理知道，可变宽度的圆角矩形框其实也是那个固定宽度的圆角矩形框的变形，视频上是通过把右边的边框进行平铺，最后实现的可变宽度：
说说我自己的想法：在上一篇文章里面已经介绍了圆角矩形框的实现原理，最后我也实现了那个固定宽度的圆角矩形框，只要我可以把中间的那个
标签的左右边框的长度可以随文本变化的话，那就可以很方便的实现可变宽度的圆角矩形框了啊。
带着这样的想法，通过1天时间的研究（过程苦逼略过），通过对比border的属性和查找资料，终于发现了border的一个重要属性：_width、_height。 这个属性的意思是高度或宽度取决于其他属性的值。 那要是这样的话，就可以实现我们的需求了。
下面是我的具体设计过程（so easy只要你懂了原理）：
把固定高度的圆角矩形框建立起来，过程同上一篇文章：
查看更多关于纯CSS技术实现可变高度的圆角矩形框-soeasy_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109191