HTML怎么做出双层相框

在HTML中制作双层相框，可以让网页的图片展示更加美观、有层次感，下面,我将详细介绍如何在HTML中实现双层相框的效果。

我们需要创建一个HTML文件,并在文件中添加以下基本结构：

Markup

<!DOCTYPE html>
<html>
<head>
    <title>双层相框示例</title>
    <style type="text/css">
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <!-- 在这里添加图片和相框代码 -->
</body>
</html>

我们需要在<style>标签中添加CSS样式,以实现双层相框的效果。

定义外层相框样式：

CSS

.outer-frame {
    width: 300px;
    height: 200px;
    border: 10px solid #333; /* 外层相框颜色 */
    position: relative;
    overflow: hidden;
    margin: 50px;
}

定义内层相框样式：

CSS

.inner-frame {
    width: 280px; /* 内层相框宽度，比外层小20px */
    height: 180px; /* 内层相框高度，比外层小20px */
    border: 5px solid #fff; /* 内层相框颜色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

将以下代码添加到<body>标签中,以显示图片和相框：

Markup

<div class="outer-frame">
    <div class="inner-frame">
        <img src="example.jpg" alt="示例图片" width="280" height="180">
    </div>
</div>

src属性中的example.jpg需要替换为你想展示的图片的路径,以下是完整的代码示例：

Markup

<!DOCTYPE html>
<html>
<head>
    <title>双层相框示例</title>
    <style type="text/css">
        .outer-frame {
            width: 300px;
            height: 200px;
            border: 10px solid #333;
            position: relative;
            overflow: hidden;
            margin: 50px;
        }
        .inner-frame {
            width: 280px;
            height: 180px;
            border: 5px solid #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="outer-frame">
        <div class="inner-frame">
            <img src="example.jpg" alt="示例图片" width="280" height="180">
        </div>
    </div>
</body>
</html>