您的位置：首页 > Web前端 > CSS

css2.1实现图片添加阴影效果

2016-12-15 17:08 337 查看

盒子里面放了img标签，盒子浮动后，盒子的背景图片（就是阴影图片）会应用图片的宽高。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 核心技术就是float:left ,clear:right,
盒子脱离文挡流后，背景图片会应用盒子的高度*/
.shadow{
border: 1px solid red;
background: url('img/shadow.gif') no-repeat bottom right;
/* margin: 5px; */
float: left;
clear: right;
}
.shadow img{
display: block;
width: 300px;
height: 300px;
/* 向左上角偏移5px */
/* margin: -5px 5px 5px -5px; */
/* 或者使用相对定位 */
position: relative;
top: -5px;
left: -5px;
/* border: 1px solid red;
padding: 4px; */
}
</style>
</head>
<body>
<div class="shadow">
<img src="img/dunstan.jpg">
</div>
</body>
</html>

为了显示效果明显，我给背景图案加了边框，只要图片大小不超过背景图片都能实现阴影边框，演示地址：http://down.yesyes.wang/book/04/shadow.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航