使用CSS制作的一个图片浏览效果。
2008-07-31 12:52
841 查看
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="pragma" content="no-cache" />
<!--缓存信息-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="gb2312" />
<!--编码信息-->
<meta name="robots" content="all" />
<!--机器人爬虫-->
<meta name="author" content="Ghost" />
<meta name="Copyright" content="CSSForest" />
<meta name="Description" content="CSS森林" />
<meta name="Keywords" content="ImgView,CSS,样式表,标准,web,Blog,博客,XHTML,CSSForest,CSS森林" />
<title>ImgView Demo -- CSS森林 </title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-780254-3";
urchinTracker();
</script>
<style type="text/css">
h2,ul,li{margin:0;padding:0;list-style:none;}
img{border:0;}
.copyright{position:relative;top:520px;left:10px;width:300px;height:200px;line-height:10px;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}
.imgview{
position:absolute;
top:30px;
z-index:80;
float:left;
width:857px;
height:auto;
min-height:440px;
}
.imgview a{
text-decoration:none;
}
.imgview h2{
position:absolute;
top:10px;
left:10px;
width:290px;
height:30px;
background-color:#FFFFFF;
color:#000000;
font-size:1.2em;
text-indent:10px;
line-height:30px;
}
.imgview ul{
position:absolute;
top:48px;
left:10px;
z-index:90;
width:290px;
height:auto;
min-height:230px;
background-color:#FFFFFF;
}
.imgview ul li{
float:left;
width:82px;
height:59px;
margin:8px 6px 7px;
border:1px solid #DEDEDE;
}
.imgview ul li strong{
display:none;
}
.imgview ul li a:hover{
display:block;
width:100%;
height:100%;
}
.imgview ul li a:focus strong,
.imgview ul li a:active strong{
display:block;
position:absolute;
top:350px;
left:300px;
z-indent:100;
width:537px;
height:30px;
background-color:#FFFFFF;
color:#000000;
text-indent:10px;
line-height:30px;
}
.imgview ul li a:hover span img{
position:absolute;
top:240px;
left:1px;
width:200px;
height:140px;
}
.imgview ul li a:active span img,
.imgview ul li a:focus span img{
position:absolute;
top:-38px;
left:300px;
z-index:90;
width:537px;
height:380px;
}
.imgview ul li img{
width:80px;
height:57px;
}
.imgview .imgview-rep{
position:absolute;
top:287px;
left:10px;
z-index:10;
width:201px;
height:140px;
border:1px solid #999999;
color:#EFEFEF;
font-size:2em;
text-align:center;
line-height:140px;
}
.imgview .imgview-bgtext{
position:absolute;
top:9px;
left:309px;
z-index:10;
width:537px;
height:380px;
border:1px solid #999999;
color:#EFEFEF;
font-size:5em;
text-align:center;
line-height:380px;
}
.imgtag{
position:absolute;
top:130px;
left:10px;
}
.imgtag .tagname{
float:left;
width:100px;
height:30px;
text-align:center;
line-height:30px;
cursor:pointer;
}
.imgtag .tag1
.imgtag .tag2,
.imgtag .tag3{
position:absolute;
left:0;
width:100px;
}
.imgtag .tag1{
position:absolute;
left:0;
background-color:#BCC8C3;
}
.imgtag .tag1 .imgview{
left:0;
background-color:#BCC8C3;
}
.imgtag .tag2{
position:absolute;
left:102px;
background-color:#BFB6B4;
}
.imgtag .tag2 .imgview{
display:none;
}
.imgtag .tag2:hover .imgview{
display:block;
left:-102px;
z-index:80;
background-color:#BFB6B4;
}
.imgtag .tag3{
position:absolute;
left:204px;
background-color:#CCC8BF;
}
.imgtag .tag3 .imgview{
display:none;
}
.imgtag .tag3:hover .imgview{
display:block;
left:-204px;
z-index:80;
background-color:#CCC8BF;
}
/*==S== hack ====*/
.imgview{
/*lte IE 6 hack*/
_height:440px;
_font-size:75%;
}
.imgview ul{
/*lte IE 6 hack*/
_height:230px;
}
.imgview ul:after{
/*FF hack*/
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.imgview ul li{
/*lte IE 6 hack*/
_height:63px;
_margin:8px 5px 7px;
}
.imgview .imgview-rep{
/*lte IE 6 hack*/
_width:203px;
}
.imgview .imgview-bgtext{
/*lte IE 6 hack*/l
_width:539px;
}
.imgtag .tag1 .imgview,
.imgtag .tag2 .imgview,
.imgtag .tag3 .imgview{
/*lte IE 6 hack*/
}
/*==E== hack ====*/
</style>
</head>
<body>
<h1>ImgView CSS Demo</h1>
<p>使用CSS制作的一个图片浏览效果。</p>
<div class="imgtag">
<div class="tag1">
<!--[if lte IE 6]><a href="#nogo1" class="taga1"><![endif]-->
<div class="tagname">TagName1</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 01</h2>
<ul>
<li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
<li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
<li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
<div class="tag2">
<!--[if lte IE 6]><a href="#nogo2" class="taga2"><![endif]-->
<div class="tagname">TagName2</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 02</h2>
<ul>
<li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
<li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
<li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
<div class="tag3">
<!--[if lte IE 6]><a href="#nogo3" class="taga3"><![endif]-->
<div class="tagname">TagName3</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 03</h2>
<ul>
<li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
<li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
<li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
</div>
<div class="copyright">
<div class="vcard">
<div class="logodiv"><img class="logo" src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>
<div class="info">
<p class="fn n"><strong class="given-name">Ghost</strong> <strong class="family-name">Zhang</strong></p>
<p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com" class="email">lovej1bz@gmail.com</a></p>
<p class="qq"><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes" class="uid">22168741</a></p>
<p class="org"><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>
<strong>Blog:</strong><a href="http://forest.blogbus.com" class="url" rel="me">http://forest.blogbus.com</a> </div>
</div>
</div>
</body>
</html>
<!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" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="pragma" content="no-cache" />
<!--缓存信息-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="gb2312" />
<!--编码信息-->
<meta name="robots" content="all" />
<!--机器人爬虫-->
<meta name="author" content="Ghost" />
<meta name="Copyright" content="CSSForest" />
<meta name="Description" content="CSS森林" />
<meta name="Keywords" content="ImgView,CSS,样式表,标准,web,Blog,博客,XHTML,CSSForest,CSS森林" />
<title>ImgView Demo -- CSS森林 </title>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-780254-3";
urchinTracker();
</script>
<style type="text/css">
h2,ul,li{margin:0;padding:0;list-style:none;}
img{border:0;}
.copyright{position:relative;top:520px;left:10px;width:300px;height:200px;line-height:10px;}
.copyright a:link{color:#666666;text-decoration:none;}
.copyright a:hover{color:#CC9900;text-decoration:underline;}
.imgview{
position:absolute;
top:30px;
z-index:80;
float:left;
width:857px;
height:auto;
min-height:440px;
}
.imgview a{
text-decoration:none;
}
.imgview h2{
position:absolute;
top:10px;
left:10px;
width:290px;
height:30px;
background-color:#FFFFFF;
color:#000000;
font-size:1.2em;
text-indent:10px;
line-height:30px;
}
.imgview ul{
position:absolute;
top:48px;
left:10px;
z-index:90;
width:290px;
height:auto;
min-height:230px;
background-color:#FFFFFF;
}
.imgview ul li{
float:left;
width:82px;
height:59px;
margin:8px 6px 7px;
border:1px solid #DEDEDE;
}
.imgview ul li strong{
display:none;
}
.imgview ul li a:hover{
display:block;
width:100%;
height:100%;
}
.imgview ul li a:focus strong,
.imgview ul li a:active strong{
display:block;
position:absolute;
top:350px;
left:300px;
z-indent:100;
width:537px;
height:30px;
background-color:#FFFFFF;
color:#000000;
text-indent:10px;
line-height:30px;
}
.imgview ul li a:hover span img{
position:absolute;
top:240px;
left:1px;
width:200px;
height:140px;
}
.imgview ul li a:active span img,
.imgview ul li a:focus span img{
position:absolute;
top:-38px;
left:300px;
z-index:90;
width:537px;
height:380px;
}
.imgview ul li img{
width:80px;
height:57px;
}
.imgview .imgview-rep{
position:absolute;
top:287px;
left:10px;
z-index:10;
width:201px;
height:140px;
border:1px solid #999999;
color:#EFEFEF;
font-size:2em;
text-align:center;
line-height:140px;
}
.imgview .imgview-bgtext{
position:absolute;
top:9px;
left:309px;
z-index:10;
width:537px;
height:380px;
border:1px solid #999999;
color:#EFEFEF;
font-size:5em;
text-align:center;
line-height:380px;
}
.imgtag{
position:absolute;
top:130px;
left:10px;
}
.imgtag .tagname{
float:left;
width:100px;
height:30px;
text-align:center;
line-height:30px;
cursor:pointer;
}
.imgtag .tag1
.imgtag .tag2,
.imgtag .tag3{
position:absolute;
left:0;
width:100px;
}
.imgtag .tag1{
position:absolute;
left:0;
background-color:#BCC8C3;
}
.imgtag .tag1 .imgview{
left:0;
background-color:#BCC8C3;
}
.imgtag .tag2{
position:absolute;
left:102px;
background-color:#BFB6B4;
}
.imgtag .tag2 .imgview{
display:none;
}
.imgtag .tag2:hover .imgview{
display:block;
left:-102px;
z-index:80;
background-color:#BFB6B4;
}
.imgtag .tag3{
position:absolute;
left:204px;
background-color:#CCC8BF;
}
.imgtag .tag3 .imgview{
display:none;
}
.imgtag .tag3:hover .imgview{
display:block;
left:-204px;
z-index:80;
background-color:#CCC8BF;
}
/*==S== hack ====*/
.imgview{
/*lte IE 6 hack*/
_height:440px;
_font-size:75%;
}
.imgview ul{
/*lte IE 6 hack*/
_height:230px;
}
.imgview ul:after{
/*FF hack*/
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.imgview ul li{
/*lte IE 6 hack*/
_height:63px;
_margin:8px 5px 7px;
}
.imgview .imgview-rep{
/*lte IE 6 hack*/
_width:203px;
}
.imgview .imgview-bgtext{
/*lte IE 6 hack*/l
_width:539px;
}
.imgtag .tag1 .imgview,
.imgtag .tag2 .imgview,
.imgtag .tag3 .imgview{
/*lte IE 6 hack*/
}
/*==E== hack ====*/
</style>
</head>
<body>
<h1>ImgView CSS Demo</h1>
<p>使用CSS制作的一个图片浏览效果。</p>
<div class="imgtag">
<div class="tag1">
<!--[if lte IE 6]><a href="#nogo1" class="taga1"><![endif]-->
<div class="tagname">TagName1</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 01</h2>
<ul>
<li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
<li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
<li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
<div class="tag2">
<!--[if lte IE 6]><a href="#nogo2" class="taga2"><![endif]-->
<div class="tagname">TagName2</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 02</h2>
<ul>
<li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
<li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
<li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
<div class="tag3">
<!--[if lte IE 6]><a href="#nogo3" class="taga3"><![endif]-->
<div class="tagname">TagName3</div>
<div class="imgview">
<div class="imgview-bgtext">PhotoView</div>
<div class="imgview-rep">PhotoView</div>
<h2>Photogallery 03</h2>
<ul>
<li title="photo2"><a href="#nogo"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>
<li title="photo4"><a href="#nogo"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>
<li title="photo5"><a href="#nogo"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>
<li title="photo3"><a href="#nogo"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>
<li title="photo1"><a href="#nogo"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>
<li title="photo8"><a href="#nogo"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>
<li title="photo6"><a href="#nogo"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>
<li title="photo7"><a href="#nogo"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>
<li title="photo9"><a href="#nogo"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>
</ul>
</div>
<!--[if lte IE 6]></a><![endif]-->
</div>
</div>
<div class="copyright">
<div class="vcard">
<div class="logodiv"><img class="logo" src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" alt="LOGO" /></div>
<div class="info">
<p class="fn n"><strong class="given-name">Ghost</strong> <strong class="family-name">Zhang</strong></p>
<p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com" class="email">lovej1bz@gmail.com</a></p>
<p class="qq"><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes" class="uid">22168741</a></p>
<p class="org"><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>
<strong>Blog:</strong><a href="http://forest.blogbus.com" class="url" rel="me">http://forest.blogbus.com</a> </div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用CSS制作文字环绕图片效果（文字内容包含<li>标签）
- CSS溢出实现一个图片放大的效果
- 使用JS制作一个鼠标可拖的DIV（三）——移动带图片DIV
- 使用HTML+css实现京东图片自动轮播效果(自己写的)
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
- ps实例二：使用高斯滤镜制作图片阴影效果？
- 文档显示部件，文档编辑部件使用CSS制作好看的背景显示效果
- css制作的弹出式图片预览效果
- +【CSS3】使用纯css代码实现图片轮播效果
- 制作html网页时如何使用CSS使背景图片拉伸（填充）
- 使用CSS实现图片分割效果的简单方法介绍
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（5）使用放射渐变制作光影效果
- Android在打开一个新的Activity浏览大图时使用ImageView/PhotoView的时候图片显示在屏幕上部的问题
- 使用Axure制作无限循环展示图片效果
- +【CSS3】使用纯css代码实现图片轮播效果
- 类似于Flash制作的一个图片展示效果
- 使用html+css+js技术编写一个完整的表格列表内容中 复选框的全选 反选效果
- 不使用图片创建CSS圆角效果