.9圖原理：三部分：左右各一部分，中間內容區隨內容自動伸縮

1、h5

.package-num{height: .4rem;line-height: .4rem;min-width: .4rem;text-align: center;padding: 0 .1rem;font-size: .28rem;color: #fff;border-radius: .2rem;background-color: #ff3d34;} <span class="package-num">111</span>

?

2、PC端

中間部分隨內容寬度自動伸縮

.tip-auto-con{display: -webkit-box;display: -webkit-flex;display: flex;height: 57px} .tip-auto-con>*{display: block;height: 100%;} .bg-border{background-repeat: no-repeat;width: 34px;background-image: url("<?php echo base_url('static/template/img/honor/tips.png')?>");} .left-border{background-position: 0 0;} .right-border{background-position: -141px 0;} .tip-auto-con>span{line-height: 57px;background-position: center;background-repeat: repeat;background-image: url("<?php echo base_url('static/template/img/honor/tips_middle.png')?>");} <div class="tip-auto-con"><i class="bg-border left-border"></i><span>隨內容自動伸縮</span><i class="bg-border right-border"></i> </div>

?

總結

以上是生活随笔為你收集整理的css 类似.9图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。