CSS3之border-image

时间:2024-09-10 22:07:38

先上效果图,类似于IPHONE手机左上角的返回按钮样式,如果是在CSS2那么就要做一张背景图片扩展就没那么灵活了,CSS3内就不需要了,CSS3样式挺强大方便的。

CSS3之border-image

源图片:

CSS3之border-image

样式:

.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!!!