圆角边框，兼容性很好~【收藏】

最新推荐文章于 2024-07-24 16:53:23 发布

Enna

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量939

点赞数 1

分类专栏：点点滴滴文章标签： class div 浏览器 xhtml html 扩展

点点滴滴专栏收录该内容

7 篇文章 0 订阅

订阅专栏

.box { width:500px; margin:30px auto; } 
.box .r1 { height:1px; overflow:hidden; margin:0 5px; background:#ededed; } 
.box .r2 { height:1px; border-left:2px solid #ededed; border-right:2px solid #ededed; margin:0 3px; background:#ff0; overflow:hidden; }
 .box .r3 { height:1px; border-left:1px solid #ededed; border-right:1px solid #ededed; margin:0 2px; background:#ff0; overflow:hidden; }
  .box .r4 { height:2px; border-left:1px solid #ededed; border-right:1px solid #ededed; margin:0 1px; background:#ff0; overflow:hidden; }
  .box .content { background:#fff; border-left:1px solid #ededed; border-right:1px solid #ededed; padding:7px 10px; zoom:1; } /*---修改边框颜色---*/ 
	.box .r2, .box .r3, .box .r4, .box .content { border-color:#2d437b; } 
	.box .r1 { background:#2d437b; } 
	/*---修改背景颜色---*/
	 .box .r2, .box .r3, .box .r4, .box .content { background:#f3fdff; } 


<!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"> 
<style> 
 

	 /*---修改圆角大小---*/ 
	 .box2 { width:500px; margin:30px auto; }
	  .box2 .r1 { height:1px; overflow:hidden; margin:0 2px; background:#ededed; }
		 .box2 .r2 { height:1px; overflow:hidden; margin:0 1px; border-left:1px solid #ededed; border-right:1px solid #ededed; background:#fff;}
		 .box2 .content { background:#fff; border-left:1px solid #ededed; border-right:1px solid #ededed; padding:7px 10px; zoom:1; }
		  </style> 
			<body> 
			<div class="box2">
			 <div class="top">
			  <div class="r1"></div>
				 <div class="r2"></div>
				  <div class="r3"></div>
					 <div class="r4"></div> 
					 </div> 
					 <div class="content">
					  <p> 这样形成的圆角，是具备多种优势的：<br /> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br /> 3. 圆角颜色易自定义。<br /> 4. 圆角大小可自定义。(试着将class="box"的修改为class="box2"。)<br /> 5. 圆角模式易自定义。<br /> 6. 可以存在于任意背景中。(试着修改body的background。)<br /> 7. html结构清晰。这样形成的圆角，是具备多种优势的：<br /> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br />这样形成的圆角，是具备多种优势的：<br /> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br /> </p> 
						</div> 
						<div class="bottom"> 
						<div class="r4"></div>
						 <div class="r3"></div> 
						 <div class="r2"></div>
						  <div class="r1"></div>
							 </div> 
							 </div> 
							 </body>
							  </html>

Enna

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圆角边框，兼容性很好~【收藏】

.box { width:500px; margin:30px auto; } .box .r1 { height:1px; overflow:hidden; margin:0 5px; background:#ededed; } .box .r2 { height:1px; border-left:2px solid #ededed; border-right:2px solid #eded
复制链接

扫一扫