20170608学习笔记整理

最新推荐文章于 2017-08-30 08:58:16 发布

孤岛浅滩

最新推荐文章于 2017-08-30 08:58:16 发布

阅读量186

点赞数

分类专栏： notes 文章标签： CSS 基础前端圆角框

本文链接：https://blog.csdn.net/m0_37851778/article/details/72967049

版权

notes 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

一．精通CSS第四章

1.固定宽度的圆角框

HTML:

<div class="box">
		<h2>yyc change the world</h2>
		<p class="last">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.
		</p>
</div>

CSS：

/*将顶部图像应用于标题元素，将底部图像应用于div框的底部。因为两个
背景图像是单色的，所以可在div框上添加同色背景，形成框的主体*/
.box{
width: 418px;
background: #effce7 url(../images/bottom.gif) no-repeat left
bottom;
}
.box h2{
color:teal;
background: url(../images/top.gif) no-repeat left top;
}
/*为了内容不碰到框的边界，所以在div中的元素上添加一点内边距*/
.box{
padding-bottom: 1px;
}
.box h2{
margin-top: 0;
padding:20px 20px 0 20px;
}
.box p{
padding:0 20px;
}
 
/*重新设置内容、上、下背景，为了设置圆角框，再来点左右边距
（上左下右）*/
.box{
width:424px;
background: url(../images/tile2.gif) repeat-y;
}
.box h2{
background: url(../images/top2.gif) no-repeat left top;
padding-top: 20px;
}
.box .last{
background: url(../images/bottom2.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2,.box p{
padding:0 20px 0 20px;
}
/*BUG*/
p{
margin-bottom: -10px;
}

Result: