CSS3之border-image

先上效果图，类似于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!!!