繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 提取自百度有啊的css圆角效果
- Javascript
- JavaScript窗口功能指南之检查一个窗口是否存在
- 用JAVASCIRPT写的一个动态显示日期的函数！
- JavaScript窗口功能指南之打开一个新窗口
- JavaScript窗口功能指南之在窗口中书写内容
- JavaScript窗口功能指南之引用已打开的窗口
- JavaScript窗口功能指南之发挥窗口特征
- JavaScript窗口功能指南之命名窗口和框架
- JavaScript窗口功能指南之创建对话框
- 对连串英文自动换行的解决方法 IE5.5 无忧脚本
- javascript扫雷游戏,版本二
- window.external的使用
- JavaScript 是什麽？
- SelectBox in Frame
- 24点终结者(javascript)
- 用Javascript转换源代码
- JS特效之状态栏冒泡
- JavaScript：实现滚动带链接的字幕
- jscript错误代码及相应解释大全
- 实现随鼠标飘浮移动文字的JavaScript
- 怎样捕捉 Delete 键
Javascript 中的 提取自百度有啊的css圆角效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 68 ::
收藏到网摘: n/a
css圆角效果大家注意下图片，其实就是利用图片+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" content="text/html; charset=gb2312" />
<title>百度有啊css圆角方案</title>
<style>
.box1{background:url('/upload/tech/20091012/20091012094623_2a79ea27c279e471f4d180b08d62b00a.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('/upload/tech/20091012/20091012094626_66808e327dc79d135ba18e051673d906.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('/upload/tech/20091012/20091012094629_eecca5b6365d9607ee5a9d336962c534.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('/upload/tech/20091012/20091012094630_024d7f84fff11dd7e8d9c510137a2381.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://www.ruanchen.com/" target="_blank">软晨学习网</a>
</body>
</html>
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
评论 (0) All
