关闭

简单易变的CSS阴影效果

55人阅读 评论(0) 收藏 举报
分类:
 

代码解析

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>
<!--以上只是第一个文字块的HTML代码,但原理和其他几个都类似,里面的class值有空格,如后者与前者的样式有不一的就用后者的样式-->

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;
}

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:405013次
    • 积分:4960
    • 等级:
    • 排名:第6036名
    • 原创:789篇
    • 转载:155篇
    • 译文:1篇
    • 评论:23条
    最新评论