天天看點

CSS3之border-image

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