css 圆角边框

日期:2021-03-14 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

尽管这个东东早已被人写了无数遍了,但是以便加深记忆力,我還是在写1遍了。
我想详细介绍1种较为灵便的圆角框,它能够水平静竖直拓展。必须应用4个图象:

我应用的图象和上面有点不一样,只是4个边框。当宽度缩小时,右侧的图象会覆
盖左侧的图象。当高宽比缩小时,上面的图象会遮盖下面的。因此图象的遮盖次序
是这样的(从被遮盖到遮盖):
buttom-left <-- buttom.right <-- top-right <-- top.left
4个图象,必须4个Html元素,因此它的Html不能防止应用了附加的div,以下:

拷贝编码
编码以下:

<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Header</h2>
<p>Content</p>
</div>
</div>
</div>

各自把4个图象运用在4个元素上,编码以下:

拷贝编码
编码以下:

.box {
width: 20em;
background: url(images/buttomleft.gif) no-repeat
bottom left;
}
.box-outer {
background: url(images/buttomright.gif) no-repeat
bottom right;
}
.box-inner {
background: url(images/topleft.gif) no-repeat
top left;
}
.box h2 {
background: url(images/topright.gif) no-repeat
top right;
}
.box h2 {
padding: 20px 0 0 20px;
margin: 0;
}
.box p {
padding: 10px 20px 20px 20px;
margin: 0;
}

最终的实际效果以下(在段落里边加了1些內容):

在这里边最重要的运用图象次序难题,也便是图象遮盖的次序。父元素情况一直遮盖子
元素的情况。

拓展阅读文章:CSSmaster上有1节专业详细介绍各种各样圆角框(3.2.1)