我在box-shadow元素上提供了figure。但是，由于我给出的*{margin:10px}，图像显得偏斜。有什么办法可以让我仍然保持此边距并能够将框阴影恰好放置在图形元素上？
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
rel="stylesheet"
href="drop.css"
>
</head>
<body>
<section id="pics">
<figure
id="pic1"
class="pictures"
>
<img
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<figcaption class="figuredetails">Fig1</figcaption>
</figure>
<figure
id="pic2"
class="pictures"
>
<img
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
<figcaption class="figuredetails">Fig2</figcaption>
</figure>
</section>
<section id="content">
<p>hello</p>
</section>
</body>
</html>
CSS：
@CHARSET "UTF-8";
*{
margin: 10px;
/* padding: 10px; */
}
#pics{
width:100%;
padding: 50px 50px;
}
.pictures{
float: left;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
.pictures:before{
border:5px solid black;
}
.pictures:after{
border:5px solid black;
}
.pictures img{
width:100%;
height:auto;
border: 2px solid;
border-color: #ff0000;
}
/* #pic1{
-ms-transform: rotate(30deg); IE 9
-webkit-transform: rotate(30deg); Chrome, Safari, Opera
transform: rotate(30deg);
} */
#pic2{
padding-left: 50px;
}
#content{
clear: both;
}
.pictures > .figuredetails{
color: red;
padding-left: 20px;
}
JSfiddle在这里：
http://jsfiddle.net/5kgh8/
最佳答案
正如您的第一条评论所述，您希望将图片显示在阴影框中，因此只需要做的就是删除
#pic2{
padding-left: 50px;
}
我也没有发现任何使用
*{
margin: 10px;
/* padding: 10px; */
}
也将其删除。
结果：JsFiddle
关于html - 图形元素上的框阴影由于根距而偏斜，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23066771/