CSS山顶角圆角_层和布局特效

缂佸洦鈪礑edeCMS鐟欏棝顣堕弫娆戔柤娑旀壆鈹栭梻锟� 缁夌喐婀囬崝鈥虫珤闁缍夌涵鏇氱鞍閼辨棑绱� 閺冪姴鍜栫粩娆撴毐瀹搞儱鍙�,閻ф儳瀹抽弶鍐櫢娑撯偓闁款喖鍙忛弻锟�!

CSS山顶角圆角的实现，所谓山顶角，就是说不是纯粹意义上的平滑圆角，细看一下会明白，这些角陡的像山顶，所以叫做山顶角，呵呵，这个名字可能起的不准确，只是想描述一下这种圆角，相对圆滑的圆角，本类圆角会有另一种视觉感受。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>山顶角圆角</title>
<style type="text/css">
#wrapper{width:450px;margin:0px auto;}
#box{position:relative;width:300px;height:440px;background:#0099FF;font-size:12px;margin-right:10px;float:left;}
#box p{padding:0 20px;color:#fff;line-height:22px;margin:0;}/*www.mb5u.com*/
h3{font-size:14px;font-weight:bold;height:30px;line-height:30px;text-align:center;color:#fff;margin-top:20px;}
h4{width:90%;margin:0 auto;font-size:12px;height:22px;line-height:22px;text-align:center;border-top:1px #000 solid;border-bottom:1px #000 solid;color:#fff;margin-bottom:20px;}
/*www.mb5u.com*/
a:link,a:visited{color:#fff;}
/*山顶角样式设置*/
b{display:block;width:0;height:0;overflow:hidden; position:absolute;}
.t1{left:0;top:0;border-top:3px #fff solid;border-right:3px transparent dotted;}/*左上角*/
.t2{right:0;top:0;border-top:3px #fff solid;border-left:3px transparent dotted;}/*右上角*/
.t3{left:0;bottom:0;border-left:3px #fff solid;border-top:3px transparent dotted;}/*左下角*/
.t4{right:0;bottom:0;border-right:3px #fff solid;border-top:3px transparent dotted;}/*右下角*/
.boxstyle{position:relative;width:100px;height:100px;padding:20px;font-size:12px;float:left;margin-bottom:10px;}
#box1{background:#FF3300;}
#box2{background:#99FF33;}
#box3{background:#00CC00;}
</style>
</head>

<body>
<div id="wrapper">
<div id="box">
<b class="t1"></b><b class="t2"></b>
<div>
<h3>山顶角</h3>
<h4>作者：冰极峰</h4>
<p>这是一个山顶角而不是圆角框，实现原理请看我的一篇文章《<a href="http://www.cnblogs.com/binyong/archive/2009/02/21/1395386.html">Border属性的终极研究---看我七十二变</a>》</p>
</div>
<b class="t3"></b><b class="t4"></b>
</div>
	
<div id="box1" class="boxstyle">
	<b class="t1"></b><b class="t2"></b>
	<div>模板无忧（<href="/">mb5u.com）提供编程源代码、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</div>
	<b class="t3"></b><b class="t4"></b>
	</div>
	
	<div id="box2" class="boxstyle">
		<b class="t1"></b><b class="t2"></b>
		<div>山顶圆角，看上去同样不错。</div>
		<b class="t3"></b><b class="t4"></b>
	</div>
	
	<div id="box3" class="boxstyle">
		<b class="t1"></b><b class="t2"></b>
		<div>模板无忧（<href="/">mb5u.com）提供各类编程源码、视频教程、JavaScript/CSS特效代码等，做有质量的学习型源码下载站。</div>
		<b class="t3"></b><b class="t4"></b>
	</div>
</div>
</body>
</html>

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

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

评论加载中....

CSS山顶角圆角_层和布局特效

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

层和布局特效推荐

猜你也喜欢看这些

閺€鎯版&閸掑棔闊�