1.用a标签实现圆角水晶按钮效果的重点在于：
- 用a标签包含一个span元素，都作为行内块元素显示
- 背景图片的制作(用PhotoShop制作)
- 光标移到标签上方时a标签和span元素显示的背景图片的位置进行变换
2.背景图制作(个人经验，仅供参考)：
打开Photoshop-->
新建一张300*160像素的透明画布-->
再新建一张300*40像素的透明画布-->
在第二张画布左边用圆角矩形工具绘制一个圆角矩形（矩形不能过长），作为路径载入-->
用渐变工具填充圆角矩形，填充时选择蓝色和淡蓝色，为使颜色分隔明显，将左右填充滑块
都滑至中间-->
设置图像样式为内发光，发光色为白色，适当调整透明度和发光大小-->
将制作好的300*40像素的图像复制粘贴到300*160像素画布上。
其余部分制作方法相同。
直接上效果图。
3.代码示例：
<!DOCTYPE html>
<html language="en">
<head>
<title>圆角a标签 </title>
<meta charset="UTF-8">
<style>
a{
display:inline-block;
line-height:40px;
text-decoration:none;
background:url("btn-fit.png");
padding-left:20px;}
a span{
display:inline-block;
height:40px;
background:url('btn-fit.png') right -40px;
padding-right:20px;}
a:hover{
background:url('btn-fit.png') 0 -80px;}
a:hover span{
background:url('btn-fit.png') right -120px;}
</style>
</head>
<body>
<a href="javascript:;"> <span> 按钮按钮按钮按钮 </span></a>
</body>
</html>注意：span元素显示图片的右边部分，这样就组合成了一个按钮。当按钮超过300px时，按钮背景图片会失真。
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
