结合盒子模型，优化明信片

最新推荐文章于 2025-07-26 23:17:39 发布

原创最新推荐文章于 2025-07-26 23:17:39 发布 · 419 阅读

1 ·

CC 4.0 BY-SA版权

本文为 @叫我姜同学原创文章，未经博主允许不得转载。

文章标签：

#优化

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

IM Web训练营

5 篇文章

订阅专栏

本文通过使用CSS的盒子模型来美化一张明信片，实现了圆角边框、背景图片及阴影效果，并展示了完整的HTML代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结合盒子模型，优化了明信片片，增加了圆边角，颜色填充，阴影等效果
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>明信片</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            background: #BEBEBE;        
            /*background:url(images/2.jpg) no-repeat;*/
        }
        .border{
            position: absolute;
            left: 40%;
            right: 60%;
            width: 600px;
            height: 450px;
            margin:80px 0 0 -200px;
            border:3px solid black;
            border-radius: 20px;
            box-shadow: 0px 5px 20px #555;
            background: url(https://img-blog.youkuaiyun.com/20170419205321811) no-repeat;

        }
        .descrption{
            position: absolute;
            left: 40%;
            right: 60%;
            width: 600px;
            height: 170px;
            margin:420px 0 0 -200px;
            /*background: gray;*/
            text-align: center;
            font-size: 18px;
            font-family: "楷体";
        }
    </style>
</head>
<body>
    <div class="border">

    </div>
    <div class="descrption">
            <p>夕阳的美在于它不过于的绚灿，在于它和谐、宁静、柔美</p>
            <p>如一位情窦初开的少女含羞微笑的容颜，让人感觉美丽后面的心悸和动人.</p>
        </div>
</body>
</html>