CSS设置按钮背景图片
1、找一款编辑软件,打开后新建一个按钮(这里用DW)
网页效果图如下:
2、选择一张给按钮添加的背景图片,然后从css里设置一下:如下图所示
实现的效果网页如下:
边框属性用: border:1px solid #颜色即可;
1、如果你用的是默认的 下拉框。这个箭头的样式 跟浏览器的版本有关。版本不同样式就不一样。
2、如果你要用自定义的图片的话,恐怕有些困难。
3、你还可以 使用“模拟下拉框的方式”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot>
<html xmlns="http://www.w3.org/1999/xhtml&quot>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>无标题文档</title>
</head>
<style>
#menu5 {
width: 200px
margin: 10px
}
#menu5 li a {
height: 32px
voice-family: "\"}\""
voice-family: inherit
height: 24px
text-decoration: none
}
#menu5 li a:link, #menu5 li a:visited {
color: #FFF
display: block
background: url(menu5.gif)
padding: 8px 0 0 10px
}
#menu5 li a:hover {
color: #FFF
background: url(menu5.gif) 0 -32px
padding: 8px 0 0 10px
}</style>
<body>
<div id="menu5">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>
</body> </html>
下面是背景图片。