简单易变的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;
}

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

如何给边框添加阴影效果:box-shadow

css的box-shadow是用来添加边框阴影效果的。 属性值详解: 1、inset 可选值,默认阴影在盒子外 使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴...
  • zzqwxx
  • zzqwxx
  • 2016年07月13日 10:54
  • 6735

css3实现渐变、阴影、超出指定文本省略号显示等一些效果

1.实现边框圆角 :border-radius:5px 2.实现文字阴影 :text-shadow: .1em .1em .1em  #aaa  带有模糊效果的阴影                ...
  • guozh90
  • guozh90
  • 2013年12月05日 15:59
  • 2876

css3 shadow实现的各种漂亮阴影效果

css3 shadow按钮阴影效果Demo代码,很多漂亮的纯CSS3实现图片的各种阴影效果代码,而且按钮的背景色处理的也挺个性,看上去很舒服,阴影的各类也挺多,下阴影、弧线阴影、立体阴影等,相信有一款...
  • life66881
  • life66881
  • 2015年06月08日 14:48
  • 1833

css3圆角阴影效果

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

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

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

HTML CSS 阴影效果

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

纯CSS实现鼠标移上图片添加阴影效果

  • 2010年06月22日 11:32
  • 3KB
  • 下载

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

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

CSS3图片相册立体阴影效果

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

CSS DIV阴影效果

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

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