css制作明信片
使用CSS制作明信片
明信片通常包含背景、边框、文字和装饰元素。以下是一个简单的CSS实现方法：
明信片容器
.postcard {
width: 300px;
height: 200px;
background-color: #f9f3e6;
border: 1px solid #d4a76a;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 20px;
position: relative;
overflow: hidden;
}添加邮票效果
.stamp {
position: absolute;
top: 15px;
right: 15px;
width: 60px;
height: 80px;
background-color: #f44336;
border: 2px dashed white;
transform: rotate(10deg);
}地址区域样式
.address {
width: 60%;
height: 100px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
font-family: 'Courier New', monospace;
}消息内容样式
.message {
margin-top: 15px;
font-style: italic;
line-height: 1.5;
}完整HTML结构
<div class="postcard">
<div class="stamp"></div>
<div class="address">
To: John Doe<br>
123 Main St<br>
Anytown, USA
</div>
<div class="message">
Wish you were here! The weather is beautiful and we're having a great time.
</div>
</div>添加装饰元素
可以通过伪元素添加装饰线条：
.postcard::before {
content: "";
position: absolute;
top: 0;
left: 80%;
width: 1px;
height: 100%;
background: repeating-linear-gradient(
to bottom,
transparent,
transparent 5px,
#d4a76a 5px,
#d4a76a 10px
);
}响应式调整
添加媒体查询使明信片适应不同屏幕：
@media (max-width: 400px) {
.postcard {
width: 90%;
height: auto;
min-height: 200px;
}
}这些CSS规则组合起来可以创建一个具有复古风格的明信片效果。可以根据需要调整颜色、尺寸和装饰元素来创建不同风格的明信片。
