css制作门窗
使用CSS绘制门
通过CSS的border、box-shadow和伪元素可以模拟门的立体效果。以下代码创建一个简单的矩形门，并添加把手：
.door {
width: 100px;
height: 200px;
background: #8B4513; /* 木门颜色 */
border: 3px solid #5D2906; /* 门框 */
position: relative;
box-shadow: 5px 5px 10px rgba(0,0,0,0.3); /* 阴影增强立体感 */
}
/* 门把手 */
.door::after {
content: '';
width: 10px;
height: 20px;
background: #D4AF37; /* 金属色 */
border-radius: 5px;
position: absolute;
right: 10px;
top: 50%;
}使用CSS绘制窗户
通过CSS的border和渐变背景可以创建窗框和玻璃效果。以下代码生成一个带十字窗框的窗户：
.window {
width: 150px;
height: 150px;
background: linear-gradient(
to right,
#FFFFFF 0%, #FFFFFF 48%,
#000000 49%, #000000 51%,
#FFFFFF 52%, #FFFFFF 100%
);
border: 5px solid #2F4F4F; /* 窗框颜色 */
position: relative;
}
/* 添加横向窗框 */
.window::before {
content: '';
position: absolute;
width: 100%;
height: 5px;
background: #000000;
top: 50%;
transform: translateY(-50%);
}添加3D效果
使用CSS的transform属性可以让门窗具有透视感。以下示例使门呈现微微打开的状态：
.door-3d {
transform-origin: left center;
transform: perspective(500px) rotateY(-15deg);
transition: transform 0.5s; /* 添加动画效果 */
}
.door-3d:hover {
transform: perspective(500px) rotateY(-45deg);
}使用CSS变量控制样式
通过CSS变量可以方便地调整门窗的尺寸和颜色：
:root {
--door-width: 120px;
--door-color: #A0522D;
}
.door-custom {
width: var(--door-width);
background: var(--door-color);
}响应式设计
结合媒体查询可以让门窗适应不同屏幕尺寸：
@media (max-width: 600px) {
.window {
width: 100px;
height: 100px;
}
.door {
width: 80px;
height: 160px;
}
}这些CSS技术可以组合使用，通过调整参数创建不同风格的门窗效果。实际应用中可根据需求添加更多细节，如门上的装饰线条、窗户的反光效果等。
