Question

我在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/

Answer 1

正如您的第一条评论所说，您希望图片显示在阴影框内，因此您唯一需要做的就是删除

#pic2{
padding-left: 50px;
}

我也没有找到任何使用

*{
   margin: 10px;
   /* padding: 10px; */
}

同时删除它。

结果：JsFiddle

由于根边缘而导致图形元素偏斜的盒子阴影

1 个答案: