1

DIV内部タグ付きのがありAます。DIV の上部の境界線には挿入影があり、すべての内側の A タグには右の境界線があります。A 境界線が影の後ろにあると見栄えがよくなりますが、デフォルトでは上にあります。

私のjsFiddleを見てください。 http://jsfiddle.net/X7475/

どんなアイデアでも大歓迎です。

解決：

次のように CSS:before 疑似要素を使用して、余分な要素なしでそれを行いました。

.post-footer:before { -moz-box-sizing: border-box; box-shadow: 0 7px 7px -7px #000000 インセット; コンテンツ： " "; 表示ブロック; 高さ: 7px; オーバーフロー: 非表示; 位置: 絶対; 幅: 100%; Z インデックス: 1; }

フィドル: http://jsfiddle.net/X7475/4/

もちろん、これは本当に最高のピクセル シフトですが、それでも視覚効果の価値があると思います。

4

2 に答える 2

1

タグのクリック可能な領域の上部の 10 ピクセルを妥協できる場合は、a必要なものを達成するための回避策を次に示します。

デモ: http://jsfiddle.net/X7475/3/

HTML:

<div class="post-footer">
    <div class="topShadow"></div>
    <div class="buttons"> 
        <a>7</a>
        <a>3w</a>
        <a>Raphael</a>
        <a>229</a>
    </div>
</div>

CSS:

.post-footer {
    background: none repeat scroll 0 0 #323232;
    height: 40px;
    text-align: right;
    z-index: 9;
    position: relative;
}
.topShadow {
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:10px;
    border-top: medium none;
    box-shadow: 0 10px 10px -7px #000000 inset;
    z-index:1;
}
.post-footer a {
    border-right: 1px solid #7E7E7E;
    color: #D3D3D3;
    float: left;
    font-size: 0.8em;
    padding: 12px 17px;
    position: relative;
}
a:hover {
    background-color:#f00;
}

すべてのブラウザーで境界線のグラデーションがサポートされていれば、これを実現できたはずです。親の影のように見えるグラデーションの境界線を作成します。

于 2013-05-08T23:19:26.183 に答える