大功告成了！
一直以为用CSS做一个圆角的链接会很麻烦，在蓝色理想上看到一些漂亮的圆角链接，背景图片还可以切换，于是下载下来看了一下，发现原来实现起来也很简单。下面这个是效果图：
具体实现方法如下：
先制作好这样两张背景图片，一张为左边的圆角，比较窄，另一张为右边的圆角，比较宽（为了使较长的链接仍能正常显示），如下图：
（left.gif）
（right.gif）
CSS代码为（注意其中的背景图片的定位，这个是实现效果的关键所在）：
<!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>
<TITLE> New Document </TITLE>
<style type="text/css">
body {
margin:0;
padding:0;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
background-color:#fff;
text-align:center;
}
#tabs{
margin-left:auto;
margin-right:auto;
margin-top:40px;
width:100%;
background:#fff;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
/**背景图片的定位*/
background:url("imgs/left.gif") no-repeat left top;
margin:0;
/**下面的这个8px是left.gif的宽度，以保证背景图片衔接顺畅*/
padding:0 0 0 8px;
text-decoration:none;
cursor:hand;
}
#tabs a span {
float:left;
display:block;
/**背景图片的定位*/
background:url("imgs/right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#ccc;
cursor:hand;
}
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
/**背景图片的定位，这个30px是背景图片的一半高度，实现背景切换效果*/
background-position:0% -30px;
}
#tabs a:hover span {
/**背景图片的定位，这个30px是背景图片的一半高度，实现背景切换效果*/
background-position:100% -30px;
}
</style>
</HEAD>
<BODY>
<div id="tabs">
<ul>
<li><a href="#" title="Link"><span>Link</span></a></li>
<li><a href="#" title="My Link"><span>My Link</span></a></li>
<li><a href="#" title="More Longer"><span>More Longer</span></a></li>
<li><a href="#" title="Go"><span>Go</span></a></li>
<li><a href="#" title="GuestBook"><span>GuestBook</span></a></li>
<li><a href="#" title="Search"><span>Search</span></a></li>
</ul>
</div>
</BODY>
</HTML>
分享到：
相关推荐
在Web前端页面实现圆角效果，CSS3帮你轻松实现，一个人人皆知的属性。 CSS3圆角的优点 传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多...
主要为大家详细介绍了html轻松实现圆角矩形的方法，告诉大家如何通过div+css以及定位来实现圆角矩形？感兴趣的小伙伴们可以参考一下
我们都需要使用多张圆角图片做为背景，分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置...
本文演示如何在Android中实现ListView圆角效果。 无论是网站，还是APP，人们都爱看一些新颖的视图效果。直角看多了，就想看看圆角，这几年刮起了一阵阵的圆角...先看下在IPhone中实现圆角效果的一个图片： 在Iphone中
HTML5 css3渐变按钮代码，无使用任何JS和图片来修饰的渐变按钮，虽然样式不多，但会明确的告诉你如何实现，原理 是什么，搞懂了想做出这种按钮，那就是轻松的事了。
Demo在此。 都是一些基本的CSS3的使用，并不复杂。...作为一个有追求的前端，肯定要用纯CSS3实现啊！ 标签的HTML很简单： XML/HTML Code复制内容到剪贴板 新标签页 百度一下，你就知道 新标签页</li
占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一下快乐而轻松。 拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，...
UI客户端框架扩展方便，简单易用，很多情况下只要熟悉HTML语法，使用HTML属性就可以轻松用对于JavaScript不太熟悉的程序员是非常方便的，他们只需要关注目标业务逻辑的实现就行了，前端页面上只需要简单的写点HTML...
之前给大家介绍过用CSS来实现带箭头的提示框，今天我们来点不太一样的，本文将分享几款带箭头提示框。 qtip qTip是一种先进的提示插件，基于jQuery框架。以用户友好，而且功能丰富，qTip为您提供不一般的功能，如...
增加 fixCellHeight 选项用于禁用自动调整行高（行高可以使用 CSS 设定，从而避免每次自动计算提示了性能），默认为 true（启用自动调整，行为与之前的版本一致）； 仪表盘： 修复面板配置中的 panelAttrs 和 ...
为和自托管的GitLab实例提供了有针对性的，可自定义的暗光模式实现。 检查以查看v1.0的路线图。 预览图像显示v1.0.0的默认颜色，Inter作为UI字体，而Iosevka作为1920x1080分辨率的单色。 产品特点 这就是为什么您...