大功告成了！
一直以为用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>
分享到：
相关推荐
随着CSS3的普及，我们可以直接通过CSS的`border-radius`属性轻松实现圆角效果。然而，有些浏览器可能不支持CSS3，或者在某些特定情况下，我们需要用JavaScript来动态调整圆角。本文将探讨如何用JavaScript来实现CSS3...
CSS3引入了`border-radius`属性，它允许我们直接设置元素边框的四个角落的半径，从而实现圆角效果。语法如下： ```css element { border-radius: top-left-radius top-right-radius bottom-right-radius bottom-...
在CSS3之前，要实现圆角效果，开发者需要借助图像或者复杂的JavaScript技巧。然而，随着CSS3的推出，圆角边框变得异常简单，通过`border-radius`属性就能轻松实现。下面我们将详细介绍如何使用CSS3创建圆角窗口，...
在现代Web开发中，使用CSS实现圆角矩形已经成为一个常见的需求，它使得元素的边角不再生硬，增加了视觉上的平滑感和美观性。尽管在某些情况下，设计师可能更倾向于使用图片来达到同样的效果，但使用CSS的优势在于其...
纯CSS实现边框圆角效果是现代Web开发中的基础技能，无需依赖图片切片或JavaScript插件，只需通过CSS3的特定属性就能轻松实现。本教程将深入探讨如何使用CSS来创建具有圆角边框的元素。 首先，我们需要了解CSS3中的`...
总结来说，HTML 和 CSS 实现圆角效果有两种主要方法：一是使用 `border-radius` 属性，这是现代浏览器的首选方法；二是通过创建多个内嵌元素并调整其尺寸和背景色，以模拟圆角，适用于需要兼容旧版浏览器的情况。在...
首先，我们需要了解CSS3中的几个关键属性，它们在实现圆角效果中起着核心作用： 1. `border-radius`：这是CSS3引入的一个新属性，用于设置元素边框的圆角半径。通过指定像素值，你可以轻松地创建圆形或椭圆形的边框...
要实现圆角边框，我们需要使用 CSS 的 `border-radius` 属性。这个属性允许我们为元素的四个角落设置不同的圆角半径，从而创建出圆形或椭圆形的边框效果。例如，如果我们希望一个 `div` 元素的所有边角都是 10px 的...
CSS3引入了`border-radius`属性，它允许我们为元素的四个角设定不同的圆角半径，从而实现圆角效果。基本语法如下： ```css element { border-radius: top-left-radius top-right-radius bottom-right-radius ...
总结来说，CSS3的`border-radius`、渐变背景和阴影效果等特性，使得我们在不依赖图像的情况下，可以轻松实现圆角、复杂背景和立体感的效果。这对于网页设计和开发来说，极大地提高了效率和灵活性。通过学习和实践这...
本文将详细介绍如何通过简单的三步骤，利用CSS来实现圆角表格的制作。 ### 第一步：设置基本CSS样式 首先，我们需要定义一些基本的CSS样式规则，以确保表格元素能够正确显示，并具备我们想要的圆角效果。以下代码...
这个特性在现代网页设计中被广泛使用，因为相比传统的JavaScript或图像方法，CSS3的圆角边框更加简洁、高效，并且能够实现良好的浏览器兼容性。 首先，让我们来了解一下如何使用CSS3创建圆角边框。CSS3中的`border-...
在CSS3出现之前，实现圆角效果通常需要使用图片作为背景来达到视觉上的圆角效果，这不仅增加了页面加载的HTTP请求次数，而且增加了设计师的工作量，因为图片的维护、更新等都需要额外的操作。而使用CSS3的border-...
本文将深入探讨如何使用CSS和DIV实现圆角效果，以及如何创建带有圆角的横条效果。 首先，理解CSS的基本概念是至关重要的。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。...
接下来，我们将深入探讨如何使用CSS创建圆角矩形，以及相关的知识点。 首先，`border-radius`属性是CSS3引入的一个新特性，用于设置元素边框的四个角落的圆角半径。它可以接受一个到四个值，分别对应上、右、下和左...
在QT编程中，QDialog是用于创建用户交互对话框的标准组件。...总的来说，利用Qt的QSS功能，我们可以轻松地为QDialog实现圆角效果，提升用户体验。通过不断实践和调整，你将能创造出符合项目需求的美观且易用的对话框。
在本文中，我们将深入探讨如何使用纯CSS3实现Tab标签切换效果。Tab切换是一种常见的用户界面设计模式，它允许用户在多个视图或内容区域之间切换，而无需刷新整个页面。这种效果通常用于展示有限数量的相关信息，如...
使用CSS3可以很简便地通过代码实现圆角矩形效果，但为了兼容老版本的浏览器，使用图片来实现圆角矩形的方法依旧具有重要的实用价值。下面，我们将详细介绍几种使用Div+CSS纯图片实现圆角矩形的方法。 首先，我们...
本文将详细介绍如何用 CSS 实现圆角、三角形、五角星、五边形、爱心、十二角星、八角星、圆形、椭圆形、圆圈以及八卦等图形，并提供具体的代码示例。 #### 二、基础几何图形 ##### 1. 长方形 ```css #Rectangle {...