CSS之滑动门技术 – 灵活自适应的圆角框

现在许多网页都使用圆角边框了,一般情况下,当然离不开图片了,CSS“滑动门技术”的好处就是可以自适应,再也不怕内容撑坏页面了,还没有学会的同学赶快哟!

下面说下实现原理,右侧的圆角在左侧的大图上面滑动,随着框尺寸的增加,大图像会有更多的部分露出来

滑动门的切图一般是这样的

因为需要4张图像,所以才HTML结构上来讲就需要添加两个额外的无语义元素;

<div id=”box”>
<div id=”hook1″>
<div id=”hook2″>
<h1>滑动门技术,宽度是可以任意设定哦 示例一</h1>
<p>在这里并没有设置高度,所以高度会自动扩充</p>
</div>
</div>
</div>

CSS样式表这样写

<style type=”text/css” rel=”stylesheet”>

#box {

background:url(images/bottom_left.png) no-repeat left bottom;

width:300px;

}

#hook1 {

background:url(images/bottom_right.png) no-repeat right bottom;

}

#hook2 {

background:url(images/top_left.png) no-repeat left top;

}

h1 {

background:url(images/top_right.png) no-repeat right top;

font-size:20px;

line-height:2;

padding:10px 10px 0 30px;

}

p {

padding:0 30px 20px 30px;

}

</style>

实现的效果非常棒哦,先看看图吧

CSS滑动门

不用我在说了把,相信大家已经看到滑动门的威力了,还不会的同学赶紧学习哦

代码下载地址 Slide Door

原文链接:,转发请注明来源!

发表评论