如何在菜单栏中设置列表边框的图像？答案

【问题标题】：how can i set image for list border in menu bar?如何在菜单栏中设置列表边框的图像？
【发布时间】：2014-08-08 17:55:46
【问题描述】：

我想在网站上创建标题和菜单，如下图所示：

我想在手机和平板电脑上看到漂亮的景色。

我尝试使用下面的 cod，但无法在菜单栏列表中的 <li> 之间添加边框。你可以看到我的鳕鱼：

请帮助创建标题和菜单。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div class="header">
        <div class="header-logo">

            <div class="small-menu">
                    <ul>
                        <li><a href="#"> درباره ما </a></li>
                        <li><a href="#"> تماس با ما </a></li>
                        <li><a href="#"> گالری تصاویر </a></li>
                    </ul>
            </div> <!-- small-menu -->      

        </div>    
    </div>

</body>
</html>

CSS：

@charset "utf-8";
/* custom CSS */

* {
    padding:0;
    margin:0;
    border:0;
    }

.header {
    background-color:#b92f0b;

    width:100%;
    height:650px;
    margin-bottom:20px;
    }

.header-logo {
    background:url(../img/header/takmazzeh.png) no-repeat;
    width:820px;
    height:445px;
    margin:auto;
    position:relative;
    }

.small-menu {
    position:absolute;
    right:250px;
    top:450px;
        border-bottom:1px #CCCCCC solid;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 229, 214, 1);
    -moz-box-shadow:    0px 1px 0px 0px rgba(255, 229, 214, 1);
    box-shadow:         0px 1px 0px 0px rgba(255, 229, 214, 1);



    }

.small-menu ul {

    }

.small-menu ul li {
    float:right;
    padding:10px;
    list-style:none;

border-style: solid;
border-width: 0px 15px 0px 0px;
-moz-border-image: url(../img/header/border-dot.png) 27 repeat;
-webkit-border-image: url(../img/header/border-dot.png) 27 repeat;
-o-border-image: url(../img/header/border-dot.png) 27 repeat;
border-image: url(../img/header/border-dot.png) 27 fill repeat;
    }
/*.small-menu ul li:last-child {
    border:none;
}*/

.small-menu ul li a {
    text-decoration:none;
    color:#FFF;
    font:14px Droid Arabic Kufi;
    font-weight:900;
    }

【问题讨论】：

标签： html css menubar

【解决方案1】：

你需要做背景而不是边框图像...

.small-menu ul li {
background: url(http://saghian.ir/takmazzeh/img/header/border-dot.png) no-repeat -8px 6px;}

然后添加first-child先删除：

.small-menu ul li:first-child {
    background:none;
}

检查： FIDDLE

【讨论】：

亲爱的 Riskbreaker 谢谢你的好回答，我可以在标题中创建更好的 LOGO 吗？我使用大图，这不适合移动和慢速连接。
@webdeveloper 你需要有 Photoshop 之类的东西并在那里修改图像

【解决方案2】：

我试过了-

border-image: url(http://saghian.ir/takmazzeh/img/header/border-dot.png) 0 12 round;

它有效。虽然它不像@Riskbreaker 版本那么尖锐。您需要正确设置偏移量。我不知道你为什么用 27。

JS Fiddle

【讨论】：