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

最新推荐文章于 2021-01-28 11:12:09 发布

baiding1123

最新推荐文章于 2021-01-28 11:12:09 发布

阅读量3.2k

点赞数

分类专栏： CSS/CSS3 文章标签： css CSS Css DIV布局宽度自适应圆角框

本文链接：https://blog.csdn.net/baiding1123/article/details/8441470

版权

CSS/CSS3 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!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;
}