如何在菜单栏中设置列表边框的图像？
Posted
技术标签:
【中文标题】如何在菜单栏中设置列表边框的图像？【英文标题】：how can i set image for list border in menu bar? 【发布时间】：2014-08-08 17:55:46 【问题描述】：我想在网站上创建标题和菜单，如下图所示：
我想在手机和平板电脑上看到漂亮的景色。
我尝试使用下面的 cod，但无法在菜单栏列表中的 <li> 之间添加边框。
你可以看到我的鳕鱼：
http://jsfiddle.net/saghian/rvdg8es5/1/
请帮助创建标题和菜单。
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;
【问题讨论】：
【参考方案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
【讨论】：
以上是关于如何在菜单栏中设置列表边框的图像？的主要内容，如果未能解决你的问题，请参考以下文章