边界行为怪异

Question

我有一个简单的框架。

我用于边框的代码：

box-shadow: 0px 0px 0px 5px #E1E1E1;

所有其他元素看起来都不错，但这个有点奇怪。只有顶部边框。

.frame {
  height: 585px;
}

.frame:hover {
  box-shadow: 0px 0px 0px 5px #E1E1E1;
}

<div class="frame" background-image:url(...png)>
  ...
</div>

Answer 1

首先：background-image:url(...png)不正确，如果要内联样式需要将其包装到样式属性中，所以style="background-image:url(...png)"是正确的。（图片路径也应该是有效的）

Second : 边框是 5px tick 并且只在悬停时出现，默认情况下它会添加 height/width 到元素，如果你想保持尺寸悬停时的图像你应该考虑使用 box-shadow: inset 0p 0p 0p 5px #E1E1E1; 此外，如果你想知道为什么它看起来像边框而不是阴影，请参阅：https://www.w3schools.com/cssref/css3_pr_box-shadow.asp。您正在设置 0px s0 的模糊，这就是原因。

希望对您有所帮助！

边界行为怪异

Border acting weird

css

border