Back button (iPhone UI)


border-image を利用したボックスデザイン
2xup.org:blog
2xup.org

HTML

<div>
    <a href="http://2xup.org/blog/2009/11/css3-border-image">border-image を利用したボックスデザイン</a>
</div>

<div>
    <a href="http://2xup.org/blog/">2xup.org:blog</a>
</div>

<div>
    <a href="http://2xup.org/">2xup.org</a>
</div>

CSS

div {
    margin-bottom: 10px;
    padding: 0.5em;
    background: #6d85a3 url(./header_bg.png) repeat-x left top;
}

div a {
    display: inline-block;
    padding: 0.5em 0.5em 0.5em 0.2em;
    border: 1px solid #2e363f;
    -moz-border-image: url(./back-button.png) 2 5 2 13 / 2px 5px 2px 13px; /* Gecko */
    -webkit-border-image: url(./back-button.png) 2 5 2 13 / 2px 5px 2px 13px; /* Webkit */
    color: white;
    text-decoration: none;
    text-shadow: 0 -1px 0 black;
}

Image source


Taichi Kaminogoya.