Question

这是我在StackOverflow上的第一个问题，所以我会尝试以正确的方式对其进行格式化。

基本上，我有一个带边框和轮廓的div。在悬停时，div也会产生一个阴影，当然，它应该在轮廓之外。这在所有浏览器中都很顺利，除了firefox。由于某种原因，Firefox似乎在框阴影之外渲染轮廓。这里可以看到一个例子：http://rubencoolen.be/test.php

这是我的CSS：

.block {

    background: #eceeeb;
    border: 3px solid white;
    outline: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;

}

.block:hover {

    background: whitesmoke;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    -moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);
    box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30);

}

我似乎找不到解决这个问题的正确方法。

请原谅我的英语，这不是我的主要语言。

Answer 1

您可以嵌套div以获得与大纲相同的效果：

<div class='outline'>
    <div class="block">Test</div>
</div>

然后添加更改css：

.block {
    position:absolute;
    top:0px;
    left:0px;
    background: #eceeeb;
    border: 3px solid white;
    width: 234px;
    padding: 10px;
    float: left;
    height: 124px;
    text-align: center;
    cursor: default;
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s;
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s;
    -o-transition: background 0.7s;
    transition: background 0.7s, box-shadow 0.3s;
}

.outline {
    position:relative;
    border: 2px solid lavender;
    width: 240px;
    padding: 10px;
    float: left;
    height: 130px;
    margin: 40px;
}

This works in both latest versions of Chrome and Firefox

Answer 2

正如其他人在评论中指出的那样，你并没有真正使用outline用于它的目的 - 如果标准版不够好，它并不意味着被视为一个额外的边界您;它有自己的存在理由和自己的语义。我建议不要这样使用它。

所以你问过你可以使用什么？

border-image：

最近的浏览器都支持名为border-image的功能，它允许您根据需要定义边框的外观。您可以在边框中指定所需的任何图像，因此您可以设计边框以查看其拥有方式（甚至更复杂），而无需依赖outline样式。 / p>
缺点是IE不支持它（甚至不支持IE10），所以你需要依靠outline解决方案。但您可以使用Modernizr之类的功能对border-image进行功能检测，如果不支持outline，则只能回溯到border-image。
- 参考：https://developer.mozilla.org/en-US/docs/CSS/border-image
- 示例：http://www.sitepoint.com/css3-border-image/
- 浏览器支持：http://caniuse.com/border-image
:before或:after有边框。

:before和:after伪选择器允许您在使用CSS之后在给定元素之后创建一个额外元素。

你可以使用其中任何一个创建一个border的元素来解决问题，同样不需要使用outline或任何其他标记。

希望有所帮助。

Firefox在悬停时围绕盒子阴影勾勒出轮廓

2 个答案: