CSS利用1像素空缺实现圆角效果_层和布局特效

CSS利用1像素空缺实现圆角效果，虽然和真正的圆角有一些细小的差别，但毕竟是用纯CSS代码实现的，执行效率高，没有用到图像资源，而且扩展性好，代码复用性高，演示中包括一个列表和一个DIV区域。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="mrc-type" mrc="text/html; charset=gb2312">
<title>CSS利用1像素空缺实现为类圆角效果</title>
<style type="text/css">

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; margin-left:0;padding-left:0; }
.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;
}
.notchedListItems a:hover,
.notchedListItems a:hover b {background:#666;color:white;}
.feature {
	border:solid #647aae;
 	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;
	padding: .3em .3em .1em;
}
</style>
</head>
<body>

<h3>DIV区域：</h3>
	<div class="feature">
		<div>
		<div>
		<p>欢迎你来到模板无忧（mb5u.com），本站专一提供各类WEB编程源码、编程视频教程、JavaScript/CSS特效代码以及常用软件下载等，一个有质量的学习型源码下载站。</p>
<p>欢迎多提宝贵意见……</p>
		</div>
		</div>
	</div>
<br/>
	<ul class="notchedListItems">
	<li><a href="/"><b><b>mb5u.com</b></b></a></li>
	</ul>

</div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-12-09

[收藏][报错][返回列表]

CSS利用1像素空缺实现圆角效果_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些