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

sをネスト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;
}

これは、ChromeとFirefoxの最新バージョンの両方で機能します

于 2013-03-22T15:31:46.137 に答える
1

他の人がコメントで述べているように、あなたはoutlineそれが意図された目的のために実際に使用しているわけではありません-標準の境界線があなたにとって十分ではない場合に備えて、追加の境界線として扱われることを意図していません。それには、それ自体が存在する理由と、それ自体のセマンティクスがあります。このように使用しないことをお勧めします。

それで、あなたは代わりに何を使うことができるか尋ねましたか？

  • border-image：

    最近のブラウザはすべて、と呼ばれる機能をサポートしてborder-imageいます。この機能を使用すると、境界線の外観をほぼ自由に定義できます。outline境界線には任意の画像を指定できるため、スタイルに頼ることなく、境界線を自分の好みに合わせて（またはさらに複雑に）見えるようにデザインできます。

    欠点は、IEがそれをサポートしていないことです（IE10でさえも）。そのため、そのためのoutlineソリューションにフォールバックする必要があります。ただし、Modernizrのようなものを使用して、の機能検出を実行し、サポートされていない場合border-imageにのみフォールバックすることができます。outlineborder-image

  • :beforeまたは:after境界線付き。

    および疑似セレクターを使用する:beforeと:after、CSSのみを使用して、特定の要素の前に追加の要素を作成できます。

    これらのいずれかを使用して、または追加のマークアップborderを使用することなく、問題を解決する要素を作成できます。outline

お役に立てば幸いです。

于 2013-03-22T17:25:22.543 に答える