网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.CSS网页布局的优势与弊端.
.css技巧:批量保存div+css图片方.
.用CSS写的星级评分.
.CSS浏览器兼容方案-hack与一个完.
.火狐/IE浏览器flash透明,css强制.
.IE6支持PNG格式图片的CSS滤镜写法.
.完全CSS写的鼠标悬停tip效果.
.CSS语法手册(六)分类属性 .
.在CSS中关于字体处理效果的思考.
.巧用CSS的Border属性.
.精通 CSS 滤镜(二).
.CSS样式文件优化 更整洁而清晰.
.关于CSS 框架的论述.
.CSS+DIV设计实例:超酷的竖排导航.
.CSS定义超链接四个状态的正常顺序.
.css弹出层+屏蔽背景页面(兼容fie.
.css学习的一些心得.
.CSS另类技巧:古典竖排文字代码.
.关于客户端XHTML,CSS和JavaScri.
.CSS的常用技巧放送.

CSS定义DIV圆角边框

发表日期:2008-9-5


<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>testdiv</title>
<style>
#d1,#d3,#d4{
margin:5px 0px;
width:200px;
background-color:#eee;
}
#d1{
border:1px solid #444;
height:100px;
padding:0px 15px;
}
#d3,#d4{
margin-top:0px;
margin-bottom:0px;
border-left:1px solid #444;
border-right:1px solid #444;
}
.m{
height:100px;
width:200px;
padding:0px 15px;
position:relative;
}
#d3 .m{
margin:-4px 0px;
}
#d4 .m{
margin:-5px 0px;
}
.rt,.rb{
display:block;
width:232px;
margin-left:0px;
margin-right:0px;
}
.rt{
margin-top:5px;
}
.rb{
margin-bottom:5px;
}
.rt *,.rb *{
display:block;
height: 1px;
   overflow: hidden;
background-color:#eee;
border-left:1px solid #444;
border-right:1px solid #444;
}
.r1{
margin: 0 5px;
background-color:#444;
}
.r2{
margin: 0 3px;
border-width:0px 2px;
}
.r3{
margin: 0 2px;
}
.r4{
margin: 0 1px;
height: 2px;
}
.rb1{
margin: 0 6px;
background-color:#444;
}
.rb2{
margin: 0 4px;
border-width:0px 2px;
}
.rb3{
margin: 0 3px;
}
.rb4{
margin: 0 2px;
}
.rb5{
margin: 0 1px;
height: 2px;
}
</style>

</head>
<body>
<div id="d1">R=...</div>
<b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b
class="r4"></b></b>
<div id="d3">
<div class="m">R=5</div>
</div>
<b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b
class="r1"></b></b>
<b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b
class="rb4"></b><b class="rb5"></b></b>
<div id="d4">
<div class="m">R=6</div>
</div>
<b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b
class="rb2"></b><b class="rb1"></b></b>
</body>
</html>

上一篇:最近做切割发现的css,float兼容问题 人气:790
下一篇:google chrome 的CSS hack来了 人气:989
浏览全部css的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐