由於根部邊緣造成圖元偏斜的方塊上的陰影

我在figure元素上提供了box-shadow。但是，由於我給出的*{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/

來源

2014-04-14 GodMan

輸出什麼，你究竟want.Can你只是向我們展示的圖像？ – Zword

我無法顯示圖像。我只是希望圖像應該只出現在有陰影的盒子裏面。 – GodMan

任何這樣的事情：http://jsfiddle.net/r83P7/？ – Zword

作爲你的第一個評論說，你想成爲裏面顯示的圖片所以你需要做的唯一事情就是刪除

#pic2{ 
padding-left: 50px; 
}

此外，我找不到任何使用

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

除去這一點。

結果：JsFiddle

來源

2014-04-14 18:05:22 user3339224

實際上，'＃pic2'中的'padding-left'是爲了照顧我將要做的pic1的旋轉並給pic2一些空間在pic1之後。此外，使用「邊距」以便所有內容在左邊的一些空間之後開始，例如， Facebook的時間線總是離左邊一段距離 – GodMan

由於根部邊緣造成圖元偏斜的方塊上的陰影

回答

相關問題