简单易变的CSS阴影效果

原创 2016年06月02日 12:51:46
 

代码解析

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css3圆角阴影效果

  • 2014年09月10日 16:31
  • 903B
  • 下载

jQuery+css带阴影的撕页广告效果

  • 2013年09月18日 11:28
  • 77KB
  • 下载

css3一款3D字体带阴影效果

效果图如下: 源码如下: CSSReX | Drop Shadow with CSS3 CSSReX 任何的异常都是T...

HTML CSS 阴影效果

  • 2014年06月26日 09:40
  • 285B
  • 下载

CSS阴影效果(Box-shadow)用法趣味讲解

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧,通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法,然后进一步了解::before...

纯css鼠标覆盖阴影文字效果

  • 2016年07月21日 15:46
  • 281KB
  • 下载

CSS3图片相册立体阴影效果

  • 2013年07月03日 14:48
  • 326KB
  • 下载

了解CSS3的文字阴影效果 - Text Shadow effects

日期:2012-4-8  来源:GBin1.com 以往的CSS开发中,如果我们需要给文字添加阴影效果,基本只能将文字做成图片,而对于CSS3来说,我们只需要添加对应的text-shadow...
  • jjfat
  • jjfat
  • 2012年04月10日 15:04
  • 649

CSS DIV阴影效果

  • 2008年08月03日 13:54
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简单易变的CSS阴影效果
举报原因:
原因补充:

(最多只允许输入30个字)