论坛首页 Web前端技术论坛

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

浏览 12935 次
精华帖 (0) :: 良好帖 (3) :: 新手帖 (8) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-10-14   最后修改: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>

0 请登录后投票
   发表时间:2010-10-15  
总觉得太烦琐。页面只需要一个圆角还好,如果是多个的话,html代码太冗长了
0 请登录后投票
   发表时间:2010-10-16  
我猜想使用 "<b>" 是为了少用字符, 减少网络流量吧, 哈哈
0 请登录后投票
   发表时间:2010-10-16  
楼上说的似乎有那么点道理。
0 请登录后投票
   发表时间:2010-10-27  
创建1000个B和1000个DIV就了解了
0 请登录后投票
   发表时间:2010-11-28  
虽然可以实现圆角矩形,但为了一个圆角加了那么多无意义的标识符不是xhtml标准所提倡的,并且html代码也会变得冗长。感觉还是用图片来实现较划算,并且用图片还可以实现阴影之类的特效等。
0 请登录后投票
   发表时间:2010-12-03  
是啊。只要能兼容当前最常用的浏览器,应该是不错的。
0 请登录后投票
   发表时间:2010-12-20  
感觉用CSS实现圆角还是切图的好。。
0 请登录后投票
   发表时间:2010-12-21  
可以,我试了试。
0 请登录后投票
   发表时间:2011-04-26  
测试完毕。。。IE6、火狐都能通过。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics