简单的链接向右下凹陷效果

原创 2007年09月29日 09:54:00

  链接的效果可以被广大且有才的同学们做成漂亮的乱七八糟,所以我就不再在“漂亮”上较真了:)

  重新把曾经一段时间被人们喜爱的“向右下凹陷”的链接效果整理了一下,当个回忆也好...

  [演示地址:http://www.doyoe.com/model/xhtmlcss/style/a.htm

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>链接向右下凹陷的效果</title>
<style type="text/css">
body {
 margin:100px;
 font:12px/180% "宋体";
}
fieldset {width:200px;border:1px solid #bbb;border-top-width:3px;}
a:hover {position:relative;top:1px;left:1px;}
a.un:hover,a.nu,a.nn {text-decoration:none;}
a.nu:hover {text-decoration:underline;}
</style>
</head>
<body>
<fieldset><legend>链接向右下凹陷</legend>
<ul>
 <li><a href="">测试链接向右下凹陷的效果</a></li>
 <li><a class="un" href="">测试链接向右下凹陷的效果</a></li>
 <li><a class="nu" href="">测试链接向右下凹陷的效果</a></li>
 <li><a class="nn" href="">测试链接向右下凹陷的效果</a></li>
</ul>
</fieldset>
</body>
</html>

  看到例子,就不需要解释原理了,很简单:)  

 

相关文章推荐

CSS3中文本的描边(普通描边、凸起、凹陷)和发光效果

利用text-shadow属性的特性,同时在上,下,左,右中个方向为文字设置多个阴影,且不设置模糊作用距离(即默认没有模糊效果),就可以实现文本的描边效果了。 文本的描边效果 p{ pad...

OpenCV——PS滤镜算法之 球面化 (凹陷效果)

// define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include #...

iOS 仿淘宝加入购物车 向内凹陷折叠动画效果

转自:http://www.jianshu.com/p/1272fed070b7 1. 实现效果: 项目中需要添加一个效果,弹出弹框时,底部控制器向内凹陷,类似淘宝加入购物车动画效果,如下...

PS 滤镜——(扭曲)逆球面化 (凹陷效果)

%%% Inverse_Spherize %%% 逆球面化 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Pro...

自定义转场效果 presentViewController实现由左向右

本文主要是记录一些在网上找到的一些方法,然后自己整理了下让自己更好理解一点, 如有侵权,请告知 本次实现的代码主要是在网上下载的一些转场动画的基础上更改一下 但是源代码下载地址给忘了,有点对不起原...

在地图计算圆的外接正方形,并返回左上顶点和右下顶点(java、javascript)

javascript: /** * @param raidus 单位米 * return minLat,minLng,maxLat,maxLng */ ...
  • e_wsq
  • e_wsq
  • 2012年05月14日 16:05
  • 1157

鼠标移入文字上向右移动效果

话不多说。直接上代码。 HTML 代码: 测试一下 试试就试试,你给我等着...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单的链接向右下凹陷效果
举报原因:
原因补充:

(最多只允许输入30个字)