CSS简单圆角框实现方法

先看下效果图

欢迎大家来到IT世界,在知识的湖畔探索吧!

对基于CSS的设计最初的批评意见之一是CSS太死板了，只能建立方框，因此本次我们需要用图形软件创建下面两个图形，一个用于顶部，一个用于底部。

接下来我们详细介绍它的实现方法：

1.创建一个简单的框标记并输入相关内容

<div class=”box”>

<h2>笑话</h2>

<p>朋友圈里，有这么一条：“和女友分手后一直很不安，害怕她会变坏，胡乱约炮，太过放纵，怎么办？”下面神回复：“其他人的恶劣行径顶多是占着茅坑不拉屎，你这是出了厕所还想锁门。”</p>

</div>

2.将顶部图像用于标题的背景置于顶部（左上角），将底部图像用于DIV框的背景置于底部（左下角），然后给DIV框添加相同的背景颜色并设置一定的宽度，三者共同形成框的主体。

.box{width:275px;

background:#ef1111 url(bottom.jpg ) no-repeat left bottom;}

.box h2{background:url(top.jpg) no-repeat left top;}

3.调整两个背景图像的尺寸，宽度与DIV框的宽度一致，使其看起来更像一个整体

.box{width:275px;

background:#ef1111 url(bottom.jpg ) no-repeat left bottom;

background-size:275px;}

.box h2{background:url(top.jpg) no-repeat left top;

background-size:275px;}

4.最后为了不使内容与边框靠的太近可以添加一些内边距或并居中对齐即可

.box{width:275px;

background:#ef1111 url(bottom.jpg ) no-repeat left bottom;

background-size:276px;

margin:0 auto;}

.box h2{background:url(top.jpg) no-repeat left top;

background-size:276px;

padding-top:30px;

text-align:center;}

.box p{padding:0 5px 30px 5px;}

尺寸根据自己的需要设定，如下图：