閒來無事,突然又想起了圓角矩形的實現。不過這個話題大家已經談太久了。各種各樣的實現方案在網路上都可以看到。這裡只是記錄一下個人認為比較好的一個。這個方案不使用任何圖片,是純html css實作。 css代碼================================== 複製程式碼程式碼如下: <br />.spiffy{display:block} <br />.spiffy *{ <br />display:block; <br />height:1px; <br />font-size:.01em; <br />overflow:hidden; <br />background:#b20000} <br />. spiffy1{ <br />margin-left:3px; <br />margin-right:3px; <br />padding-left:1px; <br />padding-right:1px; <br />border-left:1px solid #8700000; <br />border-right:1px solid #870000; <br />background:#9f0000} <br />.spiffy2{ <br />margin-left:1px; <br />margin-right:1px; :1px; <br />padding-left:1px; <br />border-left:1px solid #6f0000; <br />border-right:1px solid #6f0000; <br />background:#a30000. <br />margin-left:1px; <br />margin-right:1px; <br />border-left:1px solid #a30000; <br />border-right:1px solid #a30000;} <br />border-right:1px solid #a30000;} <br />border-right:1px solid #a30000;} <br />.spiff 🎜>border-left:1px solid #870000; <br />border-right:1px solid #870000} <br />.spiffy5{ <br />border-left:1px solid #9f0000 #9f0000} <br />.spiffyfg{ <br />background:#b20000} <br /> html代碼================= ====================== 複製程式碼程式碼如下: ••• 有興趣就試試看上面兩段程式碼吧。 這個方案雖然比較不錯,但是我還是想出了一個類似的但是更簡潔的實現,呵呵,後面的文章會介紹。