css 3 相框效果图

CSS 3 相框效果图是一种带有边框和阴影的相框样式，它可以为图片或者其他元素增加一些装饰性特效，让网页内容更加生动有趣。下面我们通过代码实现一个简单的 CSS 3 相框效果图。

  <div class="frame">
    <img src="image.png" alt="图片名称">
  </div>

以上是在 HTML 中创建一个 div 容器和一个 img 元素，下面我们通过 CSS 3 中的 Box-shadow 和 border-radius 属性来进行样式设置。

  .frame {
    Box-shadow: 0 0 8px rgba(0,0.3);
    border-radius: 5px;
    overflow: hidden;
  }
  .frame img {
    display: block;
    max-width: 100%;
    height: auto;
  }

通过设置 Box-shadow 属性，我们为 div 容器增加了一个阴影效果，让图片看起来更加有立体感。border-radius 属性可以使 div 容器的边角圆滑，提高美观性。而 overflow 属性则可以防止图片超出 div 容器范围。针对 img 元素的设置，我们将其 display 属性设置为 block，使其在 div 容器内独占一行。max-width 和 height.auto 属性可以让图片在不改变原有比例的情况下进行等比缩放。

通过以上设置，我们便实现了一个简单的 CSS 3 相框效果图。当然，这只是一个基础的样式设置，还可以根据需要进行进一步的优化和扩展。