0

私はハンドルバー要素を、水平方向と垂直方向の中央に配置された素敵なテクスチャラインの疑似要素で作成しようとしています。

多くの人が背景画像でこの効果を行っていることは理解していますが、高密度ディスプレイでも機能するように、これをベクトルにしたいと考えています。

デモ: jsFiddle

全体で単一の要素を使用するだけで、次の CSS を使用します。

html, body
{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.header_handle
{
    width: 100%;
    height: 7px;
    position: relative;

    background: #9e978b;

    border-top: 1px solid #b8b1a5;
    border-bottom: 1px solid #827c72;

    text-align: center;
    cursor: s-resize;
}

.header_handle:before
{
    content: '';

    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;

    background: #ff0000;
    width: 10px;

    height: 100%;
}

.header_handle:after
{
    content: '';

    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;

    width: 42px;
    height: 1px;

    background: #ada599;
    outline: 1px solid #ada599;

    border-top: 1px solid #6b665e;
    border-bottom: 1px solid #6b665e;
}

これは、より大きなレベルで動作中の基本的な効果を示す2 番目のデモです。インラインブロック要素を整列させてから、中央にインラインブロック要素を配置するだけです。

目的の効果は次のようになります。 ここに画像の説明を入力

上記の最初のデモは 22px を超える高さで動作し、height 属性をオフにすると 22px に拡張されるため、疑似要素が 22px などであると思われるようです。

ここで一体何が起こっているのですか？

4

1 に答える 1

1

font-size: 0;メイン要素に追加します.header_handle。これにより、インライン要素間のスペースがなくなります。

CSS-Tricks のインライン ブロック要素間のスペースとの戦いからトリックを取得しました。

于 2013-06-26T23:33:13.163 に答える