因此,我在网上阅读后,设法在图像上创建了一个插入阴影。
它有效,但我无法改变它:悬停。
目前我有:
.shadow {
position: relative;
max-width: 100%;
float: left;
}
.shadow::before {
border-radius: 100%;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .6);
transition: box-shadow .2s ease-in-out;
}
.shadow:hover:before {
box-shadow: inset 5px 5px 55px rbga(0, 0, 0, .8);
}
.shadow img {
float: left;
border-radius: 100%;
width: 300px;
}
<div class="shadow">
<img src="https://picsum.photos/300/300?image=1015">
</div>
我把代码放在这里:https://codepen.io/anon/pen/rRwGmV
我希望你们中的一些人知道如何做到这一点。
谢谢
.shadow {
position: relative;
max-width: 100%;
float: left;
}
.shadow::before {
border-radius: 100%;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 3px 3px 8px red;
transition: box-shadow .2s ease-in-out;
}
.shadow:hover::before {
box-shadow: inset 5px 5px 55px green;
}
.shadow img {
float: left;
border-radius: 100%;
width: 300px;
}
<div class="shadow">
<img src="https://picsum.photos/300/300?image=1015">
</div>
如果没有:before
,你怎么看呢?
.shadow img{
border-radius: 50%;
box-shadow: 3px 3px 8px rgba(0,0,0,.6);
}
img:hover {
box-shadow: 5px 5px 5px red;
}
<div class="shadow">
<img src="https://picsum.photos/300/300?image=1015">
</div>
Here is my codepen whith this code
我忘记做某事吗?我该如何改进?