代码：
<!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=UTF-8"/>
<title> 圆角样式 </title>
<style type="text/css">
.b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}
.b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}
.b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}
/**另一种样式*/
.c41 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 5px;}
.c42 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 3px; clear:both;}
.c43 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 2px; clear:both;}
.c44 {height: 2px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}
.bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}
.bt {background: #EDF7FF;margin:0 2px;padding:5px;}
.bb {background: #FFFFFF;margin:0 2px;padding:5px;}
/**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/
</style>
</head>
<body>
<b class="b1"></b> <b class="b2"></b> <b class="b3"></b>
<div class="bc">
<div class="bt ">标题</div>
<div class="bb">第一种样式</div>
</div>
<b class="b3"></b> <b class="b2"></b> <b class="b1"></b>
<hr/>
<b class="c41"></b> <b class="c42"></b> <b class="c43"></b> <b class="c44"></b>
<div class="bc">
<div class="bt ">标题</div>
<div class="bb">第二种样式</div>
</div>
<b class="c44"></b> <b class="c43"></b> <b class="c42"></b> <b class="c41"></b>
<hr/>
<b class="b1 bb1"></b> <b class="b2 bb2"></b> <b class="b3 bb2"></b>
<div class="bc bb2">
<div class="bt bb3">另一种颜色</div>
<div class="bb">另一种颜色 这里是内容</div>
</div>
<b class="b3 bb2"></b> <b class="b2 bb2"></b> <b class="b1 bb1"></b>
</body>
</html>
分享到：
相关推荐
JS封装DIV圆角Css样式，源代码演示！
使用div+css样式呈现圆角层 不需要背景图片 用div层与样式来实现圆角层的
用DIV很方便的控制外边框圆角，以达到不用任何图片而达到美观的效果!!!
一、图片实现圆形条件 原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形。 二、使用布局技术 使用CSS3 圆角技术实现。 使用CSS3样式单词：border-radius ... 本案例在DIVCSS5初始
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
自己写的一个页面，纯DIV+CSS布局样式，适合新手研究，里面还有一些html5的代码(如div圆角设计等等)，感兴趣的也可以看看！
原理 父级元素 relative，子元素 absolute，然后通过top、...CSS样式 .wrapper-dashed{ position: relative; height: 1px; width: 100%; } /*虚线实现*/ .dashed { border-top: 1px dashed #cccccc; height: 1px;
简洁型css圆角： 方法1： .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-...
复制代码代码如下:#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px;text-align:center; background:#eee; } 复制代码代码如下:<div id=”boxes”> <div xss=removed> All sides </...
一个用CSS+DIV实现的Tab圆角选项卡 和163的那个选项卡样式差不多的
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
复制代码代码如下:<div class=...–css3自定义渐变圆角按钮样式–></div> <p><style type=”text/css”>.btn-style-01{ border-style:none; padding:8px 30px; line-height:24px; color:#fff; font:16px “Micro
使用 CSS 制作圆角边框可能是网页前端设计师们最头痛的问题之一. 圆角边框看似简单, 但实现起来却很不简单, 可能需要复杂的页面结构或大量的边角图片, 方法很多, 但无论哪一种都是难以维护的. CSS 很直观, 但显然...
一个css与css3都有效的code，如果浏览器不支持css3，那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中有效的code，如果浏览器不支持css3，那么其显示效果就不会出现。 css3和css，在编写code的时候，...
为什么要做圆角的div： 圆角div平滑美观，某些情况下有比较不错的效果。比如说要做一个报message的消息框，那么动态的生成一个圆角div则很有意义。而对html样式控制的css本身是不直接支持圆角div的。
VML是The Vector Markup Language(矢量可标记语言)，原本是微软自己开发的东西，很强大。也就是说，IE下面，可以用 VML做出圆角 。半透明、阴影 、渐变背景。
之后本书又着重讨论如何使用DIV结合CSS来搭建网站，同时也介绍了CSS在Dreamweaver中的应用。并且对于在CSS制作过程中遇到的Bug进行了详细的分析。 本书适合初、中级网页设计爱好者阅读参考。 第1篇 新手上路 第1章 ...
35个菜单样式、19个CSS菜单、鼠标放大镜查看图片效果、css_tab_ul菜单安装程序、让你震撼的图片展示javascript代码10款打包、19款网站常见多图片自动轮播banner源码、导航Tab、CSS圆角边框、侧栏式的折叠菜单、...
DIV CSS圆边效果 css3.0参考手册.chm CSS2.1完全参考手册.chm CSS控制滚动条颜色样式.txt DIV+CSS排版技巧.txt ...... ......
div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章（源代码\第15章） 示例描述：本章演示CSS基础部分知识。 CSS基础.html 演示CSS基础链接知识用法。 style1.css ...