css を html 内に配置する方法はありますか?たとえば、「before:」や「after:」などのセレクターを意味します。
<div id="foto" style="position: relative; margin: 20px auto: with: 500px;heght:200px......">
<img src="imgt/big.jpg" width="500px" height="200px">
</div>
そして、これはcssファイルです
#foto{
position: relative;
margin: 20px auto;
width: 500px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
background: #eee;
}
#foto:before{
content: "";
position: absolute;
z-index: -1;
left: 10px;
bottom: 15px;
width: 50%;
height: 20%;
box-shadow: 0 15px 10px rgba(0,0,0,0.7);
-webkit-transform: rotate(-3deg);
}
#foto:after{
content: "";
position: absolute;
z-index: -1;
left: 250px;
bottom: 15px;
width: 50%;
height: 20%;
box-shadow: 0px 15px 10px rgba(0,0,0,0.7);
-webkit-transform: rotate(5deg);
}