繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 提取自百度有啊的css圆角效果
- Javascript
- 动态改变图片尺寸（一）
- JavaScript＋PHP 应用一：网页制作中双下拉菜单的动态实现
- JavaScript + PHP 应用二：网页设计中树形菜单的动态实现
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 纯JavaScript时钟
- 网页之定时器详解
- 为网页添加活动的背景音乐
- Javascript Game
- 实用的检测分辨率的程序代码
- 【推荐】一个非常漂亮的列表框
- 绝对精彩：在网页里做类似window右键的弹出式菜单
- 怎样使网页中的元素可编辑??
- JavaScript和Java的区别
- 怎样编写IE和NN6通用的闪烁(blank)效果
- 关于如何动态地在同一页面实现两个 < select > 互传 (s1 <==> s2)
- ＣＯＯＫＩＥ欺骗
- 连串英文自动换行的方法
- JavaScript中的正则表达式(1)
- JavaScript中的正则表达式(2)
- JavaScript窗口功能指南之定制新窗口
Javascript 中的 提取自百度有啊的css圆角效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 49 ::
收藏到网摘: 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
