Question

首先，是的，我知道这里有其他线程可以处理这个问题的各种版本。我已经对它们进行了审查，但在解决我的问如果我错过了某个地方，请指出我的方向;否则我现在就坚持这个。

这是交易。

我正在尝试将三个图形，一个左边框（left.jpg）和两个顶部圆角（topleft.jpg和topright.jpg）应用到一个包含链接列表的容器中。

所需的结果应该是带阴影的左边框，顶部的两个角为圆角。

我的说明要求使用三个嵌套的div容器来完成此操作。根据我的研究和书籍，代码中的一切似乎都是正确的;但是两个圆角图形没有显示，我找不到它的原因。

我很确定我忽视了一些简单的事情，但是经过几天的努力，我开始有点睁眼。我希望有一套新的东西可以发现我所缺少的东西。 HTML和CSS代码如下。

谢谢你们。

<div id="leftColumn">
    <div id="links">
        <div class="left">
            <div class="topLeft">
                <div class="topRight">
                    <ul>
                        <li><a href="#">Akari</a></li>
                        <li><a href="#">Divide by Box</a></li>
                        <li><a href="#">Fillomino</a></li>
                        <li><a href="#">Hashiwokakero</a></li>
                        <li><a href="#">Heyawake</a></li>
                        <li><a href="#">Hitori</a></li>
                        <li><a href="#">Kakuro</a></li>
                        <li><a href="#">Katagaku</a></li>
                        <li><a href="#">Masugo</a></li>
                        <li><a href="#">Masyu</a></li>
                        <li><a href="#">Nonogram</a></li>
                        <li><a href="#">Oekaki Logic</a></li>
                        <li><a href="#">Shikaku</a></li>
                        <li><a href="#">Sudoku</a></li>
                        <li><a href="#">Suhai</a></li>
                        <li><a href="#">Super Sudoku</a></li>
                        <li><a href="#">Tenketsu</a></li>
                        <li><a href="#">Tentai Show</a></li>
                        <li><a href="#">Wordoku</a></li>
                        <li><a href="#">Yajilin</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

div.left {background-image: url(left.jpg);
         background-repeat: repeat-y;
         background-position: left;
         box-shadow: 10px 10px 5px #888888}
div.top-left {background-image: url(topleft.jpg);
             background-repeat: no-repeat;
             background-position: top-left;
             border-radius: 25px}
div.top-right {background-image: url(topright.jpg);
              background-repeat: no-repeat;
              background-position: top-right;
              border-radius: 25px}

Answer 1

您的css中存在拼写错误，这是您css未申请的原因

div.top-left {...}
div.top-right {...}

应该是

div.topLeft {...}
div.topRight {...}

HTML

<div class="topLeft">
<div class="topRight">

使用嵌套Div容器的圆角

1 个答案: