提取自百度有啊的css圓角效果
更新時間:2009年03月30日 14:06:19 作者:
css圓角效果大家注意下圖片,其實就是利用圖片+css實現(xiàn)
復(fù)制代碼 代碼如下:
<!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" content="text/html; charset=gb2312" />
<title>百度有啊css圓角方案</title>
<style>
.box1{background:url('http://chabaoo.cn/upload/20090330140617327.gif') repeat-x #1d6cb7;margin-top:1em;position:relative;zoom:1;width:778px;}
.box1 .tl,.box1 .tr,.box1 .bl,.box1 .br {width:5px;height:5px;position:absolute;background:url('http://chabaoo.cn/upload/20090330140618989.gif') no-repeat;overflow:hidden; }
.box1 .cc{height:40px; padding:5px;}
.box1 .tl {left:0;top:0;}
.box1 .tr {right:0;top:0;background-position:0 -5px;}
.box1 .bl {left:0;bottom:0;background-position:0 -10px;}
.box1 .br {right:0;bottom:0;background-position:0 -15px;}
.box2{border:1px solid #84cedd;margin-bottom:.8em;position:relative;zoom:1;width:778px;}
.box2 .tl,.box2 .tr,.box2 .bl,.box2 .br {width:6px;height:6px;position:absolute;background:url('http://chabaoo.cn/upload/20090330140618283.gif') no-repeat;overflow:hidden;}
.box2 .cc{height:40px; padding:5px;}
.box2 .tl {left:-1px;top:-1px;}
.box2 .tr {right:-1px;top:-1px;background-position:0 -6px;}
.box2 .bl {left:-1px;bottom:-1px;background-position:0 -12px;}
.box2 .br {right:-1px;bottom:-1px;background-position:0 -18px;}
.box3{position:relative;zoom:1;padding:1em 1.5em;margin:.5em 0 1em 0; background:#f1f6de}
.box3 .tl,.box3 .tr,.box3 .bl,.box3 .br {width:5px;height:5px;position:absolute;background:url('http://chabaoo.cn/upload/20090330140618807.gif') no-repeat;overflow:hidden;}
.box3 .cc{height:40px; padding:5px;}
.box3 .tl {left:0;top:0;}
.box3 .tr {right:0;top:0;background-position:0 -5px;}
.box3 .bl {left:0;bottom:0;_bottom:-1px;background-position:0 -10px;}
.box3 .br {right:0;bottom:0;_bottom:-1px;background-position:0 -15px;}
</style>
</head>
<body>
<div class="box1">
<span class="tl"></span><span class="tr"></span>
<div class="cc">
<p>圓角一</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
<p></p>
<div class="box2">
<span class="tl"></span><span class="tr"></span>
<div class="cc">
<p>圓角二</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
<p></p>
<div class="box3">
<span class="tl"></span><span class="tr"></span>
<div class="cc">
<p>圓角三</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
<br/><br/>更多代碼請訪問 <a href="http://chabaoo.cn/" target="_blank">腳本之家</a>
</body>
</html>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- CSS圓角區(qū)塊容器生成器
- CSS實現(xiàn)光滑圓角效果
- 用js實現(xiàn)CSS圓角生成更新
- 用js實現(xiàn)的抽象CSS圓角效果!!
- 純CSS生成抗鋸齒圓角的代碼
- css Sprites小實例代碼
- CSS+Jquery實現(xiàn)頁面圓角框方法大全
- JS+CSS實現(xiàn)可拖拽的漂亮圓角特效彈出層完整實例
- jQuery+html5+css3實現(xiàn)圓角無刷新表單帶輸入驗證功能代碼
- js+css實現(xiàn)的圓角邊框TAB選項卡滑動門代碼分享(2款)
- JS+CSS實現(xiàn)自適應(yīng)選項卡寬度的圓角滑動門效果
- JS+CSS實現(xiàn)的經(jīng)典圓角下拉菜單效果代碼
- CSS 使用Sprites技術(shù)實現(xiàn)圓角效果