完全自适应的圆角框

最新推荐文章于 2021-07-02 09:06:38 发布

baiding1123

最新推荐文章于 2021-07-02 09:06:38 发布

阅读量1.1k

点赞数

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

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

版权

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">
.top{
      padding-right:20px;/*在补白中显示背景图片，为图片预置宽度空间*/
      background-image:url(images/top_r.png);
      background-repeat:no-repeat;
      background-position:top right;
   font-size:1px;

      }
.topleft{
      padding-left:20px;
      background:url(images/top_l.PNG) no-repeat top left;
      font-size:1px;

      }
.topline{
      border-top:1px solid #C7EC54;
      background:#EDFBFE;
      font-size:1px;
      height:18px;/*高度和图片高度一致，top,topleft中没有设置高度，用topline的高度为左右两角的图片预置出高度空间*/
      }
.bottom{
      padding-right:20px;
      background-image:url(images/bottom_r.png);
      background-position:right top;
      background-repeat:no-repeat;
      font-size:1px;

      }
.bottomleft{
      padding-left:20px;/*在补白中显示背景图片*/

      background-image:url(images/bottom_l.png);
      background-position:left top;
      font-size:1px;

          }
.bottomline{
              border-bottom:1px solid #C7EC54;
              background-color:#EDFBFE;
              font-size:1px;
              height:18px;
     }
.content{
      background-color:#EDFBFE;
      border-left:1px #C7EC54 solid;
      border-right:1px solid #C7EC54;
      padding:20px;}

</style>

</head>

<body>

<div class="top">
<div class="topleft"><div class="topline"></div></div></div>
<div class="content">高度和宽度完全自适应的圆角框布局，适应高度的变化和浏览器窗口的变化。<br />增加的内容<br />增加的内容<br />增加的内容<br />增加的内容<br /></div>
<div class="bottom"><div class="bottomleft"><div class="bottomline"></div></div></div>
</body>
</html>

思路:

图片：

实现：

效果：

baiding1123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完全自适应的圆角框

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">完全自适应的圆角布局 .top{ padding-right:20px;/*在补白中显示背景图片，为图片预置宽度空间*/ background-image:url(im
复制链接

扫一扫

专栏目录