简单易变的CSS阴影效果-技术开发专区

简单易变的CSS阴影效果

作者：ITPUB论坛编辑： nancy 2008-06-12 00:00

【IT168技术文档】

厌倦了在图片处理软件上给每张图片加上边框修饰？让CSS帮你一把吧！嘿嘿，看看下面的几张效果图，边框都不是用图片做的，很方便吧？

代码解析

HTML部分

<div class="out narrow">
<div class="in ltin tpin">
<h2>NARROW</h2>
<p>This is the text that goes in the middle.</p>
</div>
</div>

css代码部分

    .out {
display:block;
background:#bbb;
border:1px solid #ddd;
position:relative;
margin:1em 0;
}/*设置外框(背景、边框与定位)*/
.in2 {
display:block;
background:#777;
border:1px solid #999;
position:relative;
padding:1px;
margin:1px;
}
.in {
text-align:center;
background:#fff;
border:1px solid #555;
position:relative;
padding:5px;
font-weight:normal;
}/*内框的设定*/
.ltin {
left:-5px;
}
.tpin {
top:-5px;
}
.rtin {
left:5px;

关注我们