您的位置：首页 > Web前端 > CSS

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

2012-12-26 23:25 330 查看

<!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：

用到的图片：左边

中间部分右边

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航