css+div+图片实现宽度自适应圆角框

<!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=utf-8" />
<title>自适应宽度圆角框</title>
<!--道理和前面的高度自适应一样,只是把设定宽度改成设定高度-->
<style type="text/css">
.content{
 height:146px;
 margin-top:0px;
 }
.left{
 height:146px;
 width:22px;
 float:left;
 background-image:url(images/21.PNG);
 background-position:top left;
 background-repeat:no-repeat;}
.right{
 height:146px;
 
 width:22px;
 float:left;
 background-image:url(images/22.PNG);
 background-position:top right;
 background-repeat:no-repeat;
 background-origin:padding-box;} 
.center {
 min-width:150px;
 height:128px;
 float:left;
 padding-top:10px;
 padding-bottom:5px;
 
 border-top:1px solid #FF7F27;
 border-bottom:1px solid #FF7F27;
 background-color:#FFFBFF;
 text-align:left;
 font-family:"楷体";
 color:#F30;
 font-weight:bold;
 font-size:16px;
   }

</style>
</head>

<body>
<div class="content">
<div class="left"></div>
<div class="center">中间内容 中间宽度自适应的圆角布局</div>
<div class="right"></div>
</div>

</body>
</html>

 

效果图1:效果图2:css+div+图片实现宽度自适应圆角框_第1张图片

 

 

用到的图片:左边                                           中间部分                                                  右边 

你可能感兴趣的:(css,css,css,div布局,宽度自适应圆角框)