Question

我想创建一个像这个 bookcase

的书柜

我已经做了一些，代码如下

HTML

enter code here
<html>
<head>
  <link rel="stylesheet" type="text/css" href="bookshelf.css" />
</head>

<body>

<div id="bookshelf">
   <div class="shelf">
    <div class="column" style="border-top:8px solid #444;">
     <div class="rand">
      <div class="inside"></div>
     </div>
    </div>
    <div class="column">
     <div class="rand">
      <div class="rand-border"></div>
      <div class="inside"></div></div>
     </div>
    </div>
    <div class="column">
     <div class="rand">
      <div class="inside"></div>
     </div>
    </div>
    <div class="column">
     <div class="rand">
      <div class="inside"></div></div>
     </div>
    </div>
    <div class="column">
     <div class="rand">
      <div class="inside"></div></div>
     </div>
    </div>
   </div>
  </div> 

</body>
</html>

CSS

.shelf {
    width:360px;
    margin: 50px auto;
    box-shadow:5px 5px 50px #000;
}

.shelf .column {
    border-style:solid;
    border-width:0 10px 8px 8px;
    border-color:#444 #444 #444 #444;

}

.shelf .column .rand {

border-bottom:100px solid #888;
    border-right:1px solid #555;
}

.shelf .column .inside {
    border-style:solid;
    border-color:#000 #222 #666 #111;
    height:100px;
    background:url(wood.jpg) repeat;
    box-shadow:inset 5px 5px 20px #000, inset 2px -2px 20px #111;
}

问题：我想要书架，即图像中所示的每个机架的底座。很想对此有一些想法。目前我的书柜如下图所示。

!bookcase screenshot

书柜设计与css3

0 个答案: