http://www.iteye.com/topic/610962
样例,上面是两个圆角Box。
Html代码
<!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>
<title> 圆角样式 </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<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;}
.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="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>
这里是三个厚度的圆角,如果需要再圆角大一点,b这个标记多放一个,也就是多一个象素的圆角出来了。
如果要拷到新的地方使用,只要像
Html代码
/**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/
这样添加一个样式就可以了。
分享到:
相关推荐
你或许会不以为然,可是我想告诉你的是即使将来CSS3圆角实现全浏览器兼容,但在当下图片圆角依旧是主流,丰富的图片效果(渐变、阴影、透明度、圆角、浏览器兼容、开发维护效率)这些是用代码实现远远不可比拟的。...
矩形框在网页中较为常见,不过个人觉得还是圆角框更为美观。那么圆角框是如何用DIV+CSS来实现的呢?
VML是The Vector Markup Language(矢量可标记语言),原本是微软自己开发的东西,很强大。也就是说,IE下面,可以用 VML做出圆角 。半透明、阴影 、渐变背景。
本人写的一个专门将div元素变圆角的插件, 使用方法请见我的博客: http://blog.csdn.net/tbc168
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
虽然这个东东已经被人写了无数遍了,不过为了加深记忆,我...– top.left四个图像,需要四个Html元素,所以它的Html不可避免使用了额外的div,如下: 复制代码代码如下: <div class=”box”> <div class=”box-outer”>
9.1 用table做的镜框 9.2 全自动单元格 9.2 突出的表格 9.3 让表格有提示信息 9.4 闪亮的表格边框 9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table...
9.1 用table做的镜框 9.2 全自动单元格 9.2 突出的表格 9.3 让表格有提示信息 9.4 闪亮的表格边框 9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table...
产品:哦对了,这个气泡图后面要在后台做成可配置的,到时候我们直接上传图片就行了,算是用户的个人签名。 我:!!!(╯‵□′)╯︵┻━┻ 这就有点尴尬了,总不能到时候让产品也一张图片before,一份after,中间...
0101 使用Div函数做整除操作 68 0102 使用DivMod函数返回两个操作数相除的商和余数 68 0103 使用Power函数返回底数的任何次幂 69 0104 使用Round函数将实数四舍五入为整数 69 0105 使用Sqr函数计算指定数的...
0101 使用Div函数做整除操作 68 0102 使用DivMod函数返回两个操作数相除的商和余数 68 0103 使用Power函数返回底数的任何次幂 69 0104 使用Round函数将实数四舍五入为整数 69 0105 使用Sqr函数计算指定数的...
所谓的快捷命令,是AutoCAD为了提高绘图速度定义的快捷方式,它用一个或几个简单的字母来代替常用的命令,使我们不用去记忆众多的长长的命令,也不必为了执行一个命令,在菜单和工具栏上寻寻匿匿。所有定义的快捷...