使用CSS创建框的问题

Question

我想创建一个盒子形状,我遇到了麻烦.我希望盒子有背景颜色,然后盒子里面有不同的颜色.
然后该框将具有使用ul和li的项目列表,并且每个列表项目将具有白色背景,并且列表项目的背景颜色过于拉伸内部框的整个距离.此外,列表项之间的间距应为1 px,以便可以看到内部框颜色的背景颜色.

这是我想要做的粗略草图:

Answer 1

你可以用这个css干净利落地做到这一点:

.box {
        width: 100px;
        border: solid #884400;
        border-width: 8px 3px 8px 3px;
        background-color: #ccaa77;
}

.box ul {
        margin: 0px;
        padding: 0px;
        padding-top: 50px; /* presuming the non-list header space at the top of
                              your box is desirable */
}

.box ul li {
        margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
                                    sufficiently visible */
        background-color: #ffffff;
        list-style-type: none;
        padding-left: 2px;
}

这个HTML:

<div class="box">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
   </ul>
</div>

DEMO