CSS实例(八)：不用图片实现宽度、高度自定的圆角矩形

wallimn

浏览: 5174120 次
性别:
来自: 北京

最近访客更多访客>>

ZZ_lll

java-007

xckouy

lengyun3566

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

CSS Google 浏览器 Chrome HTML

　　根据google的analytics界面分析整理，个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观，但是可以随意设置圆角矩形的宽度及高度，很灵活。
　　不知为什么google用了b元素，有点奇怪。

　　页面源码：

<!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></title>
<style type="text/css">
	html,body{
		font-size:12px;
	}
	.round_border,.round_border b{
		display:block;
		text-align:center;
	}
	.round_border_layer3,.round_border_layer2,.round_border_layer1,
	.round_border_content{
		border:1px solid #c4c4c4;
		border-width:0 1px 0 1px;
		height:1px;
		overflow:hidden;
	}
	.round_border_layer3{
		margin:0 3px;
		background:#c4c4c4;
	}
	.round_border_layer2{
		margin:0 2px;
	}
	.round_border_layer1{
		margin:0 1px;
	}
	.round_border_content{
		height:300px;
		padding:3px 6px;
	}
	/*only for better appearance, not necessary, http://wallimn.iteye.com*/
	.round_border_layer2,.round_border_layer1{
		border-color:#d3d4d5;
	}
	/*******************control bar**********************/
	.controlbar_border_layer3,.controlbar_border_layer2,.controlbar_border_layer1,
	.controlbar_border_content{
		background:#e9e9e9;
		height:1px;
		overflow:hidden;
	}
	.controlbar_border_layer3{
		margin:0 3px;
	}
	.controlbar_border_layer2{
		margin:0 2px;
	}
	.controlbar_border_layer1{
		margin:0 1px;
	}
	.controlbar_border_content{
		height:20px;
		padding:0 1em;
		line-height:20px;
		vertical-align:middle;
	}
	/*only for better appearance, not necessary, http://wallimn.iteye.com*/
	.controlbar_border_layer1,..controlbar_border_layer2{
		border-color:#f2f2f2;
	}
</style>
</head>
<body>
	<div style="width:260px;">
		<b class="round_border">
			<b class="round_border_layer3"></b>
			<b class="round_border_layer2"></b>
			<b class="round_border_layer1"></b>
		</b>
		<div class="round_border_content">
			<b class="round_border">
				<b class="controlbar_border_layer3"></b>
				<b class="controlbar_border_layer2"></b>
				<b class="controlbar_border_layer1"></b>
			</b>
			<div class="controlbar_border_content">
				隔壁老王
			</div>
			<b class="round_border">
				<b class="controlbar_border_layer1"></b>
				<b class="controlbar_border_layer2"></b>
				<b class="controlbar_border_layer3"></b>
			</b>
		</div>
		<b class="round_border">
			<b class="round_border_layer1"></b>
			<b class="round_border_layer2"></b>
			<b class="round_border_layer3"></b>
		</b>
	</div>
</body>
</html>

　　效果（编辑调试浏览器IE7）：

　　新手入门，请多指教。

查看图片附件

分享到：

推荐几个外观设计精美的网站 | CSS实例(七)：工具条效果

2010-10-11 23:18
浏览 3143
评论(24)
论坛回复 / 浏览 (24 / 13028)
分类:Web前端
查看更多

24 楼叶凡520 2011-06-30

我复制代码 IE8测试成功效果图很不错

23 楼 vimest 2011-06-30

记得a list apart上面介绍过一个五图片的滑动门，好强大。

22 楼 wallimn 2011-06-02

FF对样式的支持确实不错。能人所不能。

21 楼 kkvsyy 2011-06-02

CSS3 已经支持圆角了　期待各大浏览器的支持吧　不用整这么多的CSS代码了　目前火狐已经很好的支持了．

20 楼 yatou_0209 2011-05-20

有必要这么麻烦吗？是不是就是想实现圆角啊？

19 楼 xutao5641745 2011-04-26

测试完毕。。。IE6、火狐都能通过。

18 楼上善如水 2010-12-21

可以，我试了试。

17 楼 nqykl 2010-12-20

感觉用CSS实现圆角还是切图的好。。

16 楼 william_zhg 2010-12-03

是啊。只要能兼容当前最常用的浏览器，应该是不错的。

15 楼 pbny001 2010-11-28

虽然可以实现圆角矩形，但为了一个圆角加了那么多无意义的标识符不是xhtml标准所提倡的，并且html代码也会变得冗长。感觉还是用图片来实现较划算，并且用图片还可以实现阴影之类的特效等。

14 楼 binlaniua 2010-10-27

创建1000个B和1000个DIV就了解了

13 楼 wallimn 2010-10-16

楼上说的似乎有那么点道理。

12 楼 glassprogrammer 2010-10-16

我猜想使用 "<b>" 是为了少用字符, 减少网络流量吧, 哈哈

11 楼 jordan_micle 2010-10-15

总觉得太烦琐。页面只需要一个圆角还好，如果是多个的话，html代码太冗长了

10 楼 mlw2000 2010-10-14

wallimn 写道

　　根据google的analytics界面分析整理，个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观，但是可以随意设置圆角矩形的宽度及高度，很灵活。
　　不知为什么google用了b元素，有点奇怪。

用的是DIV吧，好像也比你写的例子效果要圆滑一点点（但也不是很完美）
http://code.google.com/p/openjpeg/

	.round1 {
		border-left:1px solid #FFFFFF;
		border-right:1px solid #FFFFFF;
	}
	.round2 {
		border-left:2px solid #FFFFFF;
		border-right:2px solid #FFFFFF;
	}
	.round4 {
		border-left:4px solid #FFFFFF;
		border-right:4px solid #FFFFFF;
	}
	.round1, .round2, .round4 {
		font-size:0;
		height:1px;
		margin:0;
		padding:0;
	}

<div class="xxxx">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 </div>
 <div class="round1"></div>
 <div class="round2"></div>
 <div class="round4"></div>
 </div>

9 楼 xttifqqk 2010-10-14

浏览器兼容吗？

8 楼 zcqshine 2010-10-13

Google浏览器也可以看出效果...不错

7 楼 wallimn 2010-10-13

我用IE7、FF、Chrome都试了一下，可以呀。

6 楼 wallimn 2010-10-13

什么浏览器呀？我试试。

5 楼西门吹牛 2010-10-13

楼主，我copy你的代码在浏览器里看不到效果

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论