需求：
制作網頁時，為了美觀，常常需要為網頁元素設定特殊形狀的背景，比如微信導航欄，有凸起和凹下去的感覺，其中最大的問題是字數不同，如何做？
解決：
用一個a包含span來制作，字數放在span里面，
此時span里面字數多一點，也可以撐開盒子，實作這個效果，（用到了css spirit 精靈圖和滑動門技術）
實體：微信導航欄代碼
核心：
1. a 盒子里面包 span 盒子
2. a盒子里，調整背景圖片位置，設定成：綠色左半邊
2. span盒子里，也調整背景圖片的位置，設定成：紅色右半邊，再span里面放文字，文字多，就自動撐開 （像滑動門推開的效果）
（所用到的背景圖片如下：
）
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 a { 8 margin: 100px; 9 height: 33px; 10 display: inline-block; 11 background: url(images/to.png) no-repeat; 12 color: #fff; 13 text-decoration: none; 14 line-height: 33px; 15 padding-left: 15px; 16 } 17 span { 18 display: inline-block; 19 height: 33px; 20 background: url(images/to.png) no-repeat right; 21 padding-right: 15px; 22 } 23 </style> 24 </head> 25 <body> 26 <a href="https://www.cnblogs.com/jane-panyiyun/p/#"> 27 <span>你好我是測驗字數特別多的首頁導航</span> 28 </a> 29 </body> 30 </html>
效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/109858.html
標籤：Html/Css