html div边框阴影

1、div边框阴影

 1 <style>
 2 div{ 
 3 -webkit-border-radius: 8px;
 4 -moz-border-radius: 8px;
 5 border-radius: 8px;
 6 -webkit-box-shadow: #ccc 0px 0px 10px;
 7 -moz-box-shadow: #ccc 0px 0px 10px;
 8 box-shadow: #ccc 0px 0px 10px;
 9 }
10 </style>

 

2、div里的img实现放大时候仍在div框里。

在img外再套一层div。position为relative。img标签position为absolute。

<div style="width: 50%; float:right; height: 80%;">
<p style="font-weight:900; font-size: 18px;color: #333;">细节截图：</p>

<div style="width:500px;height:30px;position:relative">
<img  class="big" style="width:500px;height:20px;position:absolute;top:0;left:0;" src=
"./pics/0.1.jpg" />
</div>

<br />
<div style="width:500px;height:30px;position:relative">
<img class="big" style="width:500px;height:20px;position:absolute;bottom:0;left:0;" src=
"./pics/0.2.jpg" />
</div>

</div>

上面的图片top为0，放大时向下。下面的图片bottom为0.贴着div的底部向上放大。

 

转载于:https://www.cnblogs.com/hulumiaomiao/p/8565263.html