Question

我为CSS中的div做了一个边框过渡，基本上边框以时钟工作方式显示。

将鼠标悬停在灰色矩形上即可查看。

以下代码，因为网站要求我，请查看链接。

<div class="outerBox"></div>

然而，正如您在笔中看到的那样，灰色矩形和边框的边缘之间有空隙，并且两端无法正确相交。

关于为什么这可能发生的任何想法？

更新

实际上，找到了解决方案。

Answer 1

我发现问题与边框的宽度改变div元素的框大小的方式有关。

基本上，使边框2px向div元素添加2px的宽度（我相信每一边），从而导致空间和未满足的结束。

解决方案是添加声明

box-sizing: border-box;

到:: before和:: after伪元素（为了安全起见我将它添加到div元素中）然后div元素的宽度不再受边框宽度的影响。

如果点击我问题中的链接，您会看到边框现在很好地包围了矩形。

要查看以前的状态，只需注释掉box-sizing：border-box;声明实例。

Answer 2

具有多种背景的一种更简单的解决方案：

<div class="box"></div>

SELECT s1.article, dealer, s1.price
    FROM shop s1
    JOIN (
      SELECT article, MAX(price) AS price
      FROM shop
      GROUP BY article) AS s2
ON s1.article = s2.article AND s1.price = s2.price;

边界过渡中不需要的空间

2 个答案: