Question

我正在尝试使用CSS在图像上的绘画上复制画布框架效果。我可以制作阴影和圆角，但无法弄清楚如何制作“圆角/包边”的3D效果。

当我尝试复制右图的效果时，我的实际是左图。请忽略预期图像的背景。

有帮助吗？谢谢。

.image{
  display:flex;
  justify-content:space-evenly;
}
#actual {
  border-radius: 4px;
  box-shadow: 20px 4px 10px rgba(0,0,0,0.35), 40px 8px 10px rgba(0,0,0,0.15);
}

<div class="image">
  <img id="actual" src="http://lorempixel.com/output/cats-q-c-640-480-10.jpg">  
  <img id="expected" src="https://i.imgur.com/XD8Vdvv.jpg">  
</div>

Answer 1

您可以使用inset阴影对其进行近似：

.image{
  display:inline-block;
  border-radius: 4px;
  box-shadow: 
    -2px -2px 1px rgba(0,0,0,0.5) inset,
    20px 4px 10px rgba(0,0,0,0.35), 
    40px 8px 10px rgba(0,0,0,0.15);
 width:320px;
 height:240px;
 
 margin:10px;
 background:url(http://lorempixel.com/output/cats-q-c-640-480-10.jpg) center/cover;
}

<div class="image">
</div>

Answer 2

只是想通过框阴影分层来发挥创意...干杯；

figure {
  display: block;
  margin: 1rem auto;
  height: 10rem;
  width: 10rem;
  border: gray 1px solid;
  border-radius: 3px;
  background: lightgray url('https://i.stack.imgur.com/BVW9D.jpg') no-repeat center center;
  background-size: cover;
  box-shadow: 2px 2px 0 gray,
              3px 3px 4px rgba(0,0,0,.9),
              6px 6px 12px 4px rgba(0,0,0,.25),
              0 0 14px 4px rgba(0,0,0,.15);
}

<figure></figure>

使用CSS的3D画框效果

2 个答案: