2

这是我在 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);

}

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

请原谅我中等的英语，它不是我的主要语言。

4

2 回答 2

1

As others have stated in the comments, you're not really using outline for it's intended purposes -- it's not meant to be treated just as an additional border in case the standard one isn't good enough for you; it has it's own reason for existing, and its own semantics. I'd suggest not using it this way at all.

So you asked what you could use instead?

  • border-image:

    Recent browsers all support a feature called border-image, which allows you to define the look of the border pretty much as you want to. You can specify any images you want in the borders, and thus you can design the border to look the way you have it (or even a lot more complex), without needing to resort to the outline style at all.

    The down-side is that IE doesn't support it (not even IE10), so you'll need to fall back on your outline solution for that. But you could use something like Modernizr to do feature detection for border-image, and only fall back to outline if border-image isn't supported.

  • :before or :after with a border.

    The :before and :after pseudo-selectors allow you to create an additional element before an after a given element using just CSS.

    You could use either of these to create an element with a border which would solve the problem for you, again without needing to use an outline or any additional markup.

Hope that helps.

于 2013-03-22T17:25:22.543 回答
1

您可以嵌套divs 以提供与轮廓相同的效果：

<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;
}

这适用于最新版本的 Chrome 和 Firefox

于 2013-03-22T15:31:46.137 回答