WEB开发网
开发学院软件开发Java 最简洁图片圆角边框-无需额外标签 阅读

最简洁图片圆角边框-无需额外标签

 2009-09-10 00:00:00 来源:WEB开发网   
核心提示:目前所能写出的最简洁圆角边框了,不需要额外标签,最简洁图片圆角边框-无需额外标签,也可以只要一副图片,但这时就得添加一个额外标签,发现还没有以前写的那么感觉上优雅了,还是记下来,这是以前写的,今天又去写的时候

目前所能写出的最简洁圆角边框了,不需要额外标签。也可以只要一副图片,但这时就得添加一个额外标签。

这是以前写的,今天又去写的时候,发现还没有以前写的那么感觉上优雅了。还是记下来,以免后忘。

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> new document </title> 
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
 <meta name="generator" content="editplus" /> 
 <meta name="author" content="" /> 
 <meta name="keywords" content="" /> 
 <meta name="description" content="" /> 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
 <script type="text/javascript"> 
 <!-- 
 
 //--> 
 </script> 
 <style type="text/css"> 
 body {background:#fff;} 
 div {overflow:hidden;zoom:1;} 
 .box {padding-bottom:4px;width:190px;background:url("c-b-b.png") no-repeat left bottom;} 
 .box h3 {margin:0;padding:0;background:url("t-bg.png") no-repeat;height:20px;} 
 .box .c {border:1px solid #5c9ec0;border-width:0 1px;padding:10px;} 
 </style> 
 </head> 
 
 <body> 
 
 <div class="box"> 
 <h3>title</h3> 
 <div class="c"> 
  <p>content</p> 
 </div> 
 </div> 
 </body> 
</html> 

主要css:

Java代码

.box {padding-bottom:4px;width:190px;background:url("c-b-b.png") no-repeat left bottom;} 
  .box h3 {margin:0;padding:0;background:url("t-bg.png") no-repeat;height:20px;}

Java代码

  .box .c {border:1px solid #5c9ec0;border-width:0 1px;padding:10px;} 

Tags:简洁 图片 圆角

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接