《
HTML和CSS做网页实例教程 边框1像素缺口鼠标变色》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335522013.htm
本贴代码实现的是鼠标挪动至按钮时变色，及边框交点处的1个像素缺口（视觉上营造一种转角后果）
仅供新手参考学习，欢送大家提出更多的实现方式。
Tag：像素 缺口 鼠标 教程 网页 实例 像素 缺口 鼠标 教程 网页 实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1,HTML和CSS做网页实例教程 网页列表隔行变色.0 Strict//EN""
<html xmlns="
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>google analytics buttons</title>
<style type="text/css"> /* default stuff */
body { padding:20px; font-family:arial; text-align:center; } p, li { font-size: 12px; line-height:18px; } h3 { margin-bottom:6px; }
.examplesGoHere { text-align:left; margin:0 auto; }
.letsGiveItAFixedWidthOf200Pixels { width:200px; } ul { list-style:none; margin-left:0; padding-left:0; margin-top:0; } ul li { margin-bottom:8px,HTML和CSS做网页实例教程 用em制作倒三角提示特效; margin-left:0; padding-left:0; }
/*---- notched effect for links in the unordered list ------*/
.notchedListItems a { display:block; border: solid #666; border-width: 0 1px; text-decoration: none; outline:none; color: #000; background: #e4e4e4; }
.notchedListItems a b { display: block; position:relative; top: -1px; left: 0; border:solid #666; border-width:1px 0 0; font-weight:normal; } .notchedListItems a b b { border-width:0 0 1px; top: 2px; padding:1px 6px; }
,HTML和CSS做网页实例教程 模拟表格对角线; .notchedListItems a:hover,HTML代码技巧 HTML注释表达式判断IE版本, .notchedListItems a:hover b { background:#666; color:white; }
.feature { border:solid #647aae,HTML中使用空格排版的问题; border-width:0 1px; background:#b0c0e6; }
.feature div { position:relative; top: -1px; left: 0; border:solid #647aae; border-width:1px 0 0; } .feature div div { top: 2px; border-width:0 0 1px,html中a标记href值正则表达式替换为空; padding: 0px 6px; }
</style>
</head>
<body>
<div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels">
<h3>A list</h3>
<ul class="notchedListItems">
<li><a href="#"><b><b>About</b></b></a></li>
<li><a href="#"><b><b>Contact</b></b></a></li>
<li><a href="#"><b><b>Cssrain</b></b></a></li>
</ul>
<h3>A div</h3>
<div class="feature">,HTML5和CSS3制作的登录表单;
<div>
<div>
,HTML5+CSS3 实现未来的网页设计; <p>This is an example of the notched corners as applied to a div container.</p>
<p>This is an example of the notched corners as applied to a div container.</p>
<p>This is an example of the notched corners as applied to a div container.<,HTML+CSS网页制作实例 制作联系人网页表单;/p>
</div>
</div>
<,Google谷歌Logo的CSS前景图片合并技术;/div>
<ul class="notchedListItems">
<li>
<a href="#"><b><b>CSS设计</b></b></a>
</li>
</ul>
</div>
<!-- end .examplesGoHere -->
</body>
</html>
--> [
网站建设之]HTML跟CSS做网页实例教程:边框1像素缺口鼠标变色
(责任编辑：网站建设)
HTML和CSS做网页实例教程 边框1像素缺口鼠标变色相关文章