先上效果圖,類似于IPHONE手機左上角的傳回按鈕樣式,如果是在CSS2那麼就要做一張背景圖檔擴充就沒那麼靈活了,CSS3内就不需要了,CSS3樣式挺強大友善的。

源圖檔:
樣式:
.banner {
background: #2b3133;
text-align: center;
font-size: 16px;
color: #eeeeef;
padding: 10px;
position: fixed;
width: 100%;
}
.back{
-moz-border-image: url(../css/images/mm_title_back_normal.png) 9 6 6 20 repeat stretch;
border-image: url(../css/images/mm_title_back_normal.png) 9 6 6 20 repeat stretch;
-webkit-border-image: url(../css/images/mm_title_back_normal.png) 9 6 6 20 repeat stretch;
border-width: 6px 6px 6px 20px;
width: 60px;
padding: 1px 2px;
/*background-clip: padding-box;*/
HTML:
<div class="banner">
<div class="back">傳回</div>
</div>
完工,是不是So easy!!!