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