在css中，我們可以用一些簡單的代碼來畫出漂亮的房間，讓我們一起來看看吧！

.room {
width: 400px;
height: 300px;
background: #F5DEB3;
position: relative;
}
.wall {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #F5DEB3;
}
.wall.left {
transform: perspective(1000px) rotateY(45deg);
transform-origin: 0 0;
position: absolute;
left: -100px;
top: 0;
z-index: -1;
}
.wall.right {
transform: perspective(1000px) rotateY(-45deg);
transform-origin: 100% 0;
position: absolute;
right: -100px;
top: 0;
z-index: -1;
}
.wall.front {
width: 100%;
height: 320px;
position: absolute;
left: 0;
top: -10px;
background: #F5DEB3;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.roof {
width: 400px;
height: 0;
border-top: 190px solid #C46210;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
position: absolute;
top: -190px;
}
.door {
width: 80px;
height: 160px;
position: absolute;
left: 160px;
bottom: 0;
background: #8B4513;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.door:before,
.door:after {
content: "";
width: 20px;
height: 100px;
position: absolute;
background: #F5DEB3;
top: -20px;
border-top-right-radius: 40px;
border-top-left-radius: 40px;
}
.door:before {
left: 20px;
}
.door:after {
right: 20px;
}

上述代碼實現了一個簡單的房間，包括四面墻和一個尖頂屋頂，以及一扇門。其中，使用了transform屬性和perspective屬性，讓我們可以改變墻面的角度，使其更真實，更有立體感。此外，還用到了偽元素:before和:after，讓門更具有立體感。

使用css畫出房間，不僅可以鍛煉我們的編程技能，還能提升我們的審美能力。在實際開發中，我們也可以使用類似的技巧來優化網頁的效果，為用戶帶來更好的視覺體驗。