2

模板中设置了以下代码，以在每次插入新的侧边栏小部件时显示。（它显示在每个新小部件周围）

<div class="sidebox-top"></div>
<div class="sidebox">
   <div class="widgets">
      <div class="textwidget">
      [WIDGET CONTENT]
      </div>
   </div>
</div>

上面显示了以下 CSS：

.sidebox-top {
    background-image: url("/images/top-border-side.gif");
    background-position: center top;
    background-repeat: no-repeat;
    height: 4px;
}
.sidebox {
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    margin-bottom: 14px;
    padding: 10px 18px 5px;
}

结果是这样的：

CSS/HTML 结果

这适用于大多数使用的所有小部件。但是，我希望上面的图像显示在侧边栏中，而没有侧边栏顶部的蓝线或边框。我知道有一种方法可以使用某些 CSS 符号在使用 > 符号之前或之后进行识别，我只是不确定如何在这里使用它，或者它是否会起作用。

任何帮助总是受到赞赏。谢谢！

4

1 回答 1

3

复制问题

好的，我已尝试在此 JSFiddle 演示中复制您的图像。如果 JSFiddle 出现故障，如下所示：

复制的示例图像

为此，我没有使用 abackground-image和 4px heighton ，而是简单地使用了 4px 。虽然不是完全相同的复制，但它实现了相同的基本效果。.sidebox-topborder-top

隐藏.sidebox-top元素

步骤1

首先，我们需要定位.textwidget分隔线中包含的第一个孩子，前提是它是一个img. 之后我们不想将此样式应用于任何其他元素，如果不是容器中的第一个元素img，我们也不想应用该样式。img为此，我们可以使用：

.textwidget img:first-child { ... }

第2步

下一步是让我们的图像顶部填充和负顶部边距等于顶部填充.sidebox和高度之和.sidebox-top。然后我们想给我们的图像一个背景，它与你的小部件的背景颜色相同：*

.textwidget img:first-child {
    background: #fff;
    padding-top:14px;
    margin-top: -14px;
}

* 注意：这假设您的小部件的背景与您的小部件容器的背景相同，并且背景是纯色。如果不是，您需要尝试background-position将您的图案背景与小部件的背景对齐。

由此，我们最终使我们的图像与顶部边框重叠，同时保持在它开始时的相同位置：

步骤 2 图

第 3 步

第三步是全覆盖.sidebox-top。要做到这一点，我们需要给我们选择的img左右填充和负左右边距等于左右填充的总和.sidebox及其边框宽度：

.textwidget img:first-child {
    ... /* Styling from Step 2 */

    padding-left: 18px;
    padding-right: 18px;
    margin-left: -19px;
    margin-right: -19px;
}

步骤 3 图

第4步

第 3 步当然覆盖了整个.sidebox-top，但也覆盖了 的边界.sidebox。为此，我们需要为我们的选择添加相同的边框img并减少我们的左右填充img以允许这样做：

.textwidget img:first-child {
    ... /* Styling from Step 2 */

    padding-left: 17px;
    padding-right: 17px;

    ... /* Margins from Step 3 */

    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
}

步骤 4 图

最后一步

最后一步是给我们添加一个上边框来img完成小部件的边框。与第 4 步一样，为此我们需要减小顶部填充的大小以允许此边框：

.textwidget img:first-child {
    ... /* Styling from previous steps */

    padding-top: 13px;
    border-top: 1px solid #D9D9D9;
}

最后结果

最终的 JSFiddle 演示。

于 2013-10-24T12:10:40.767 回答