5

サイズ/色の境界線が異なる要素がある場合、非常に奇妙なギザギザの線が発生しているようです。これは今まで気がつかなかったのですが、Vimeo の超ホットな新しいデザインを見ていたときに、これ (「グリッチ」とは言いたくありません) の奇妙な出来事に気付きました。

したがって、以下のようにスタイル設定された div がぶら下がっている場合、ピクセルのステッピングに気付くでしょう (ソリッドではなくインセットに設定されているように...)。

div {
    height            : 25px;
    width             : 50px;
    background        : #eee;
    border-style      : solid;
    border-color      : green;
    border-left-color : black;
    border-width      : 3px 3px 3px 15px;
}

誰でもこれに気づきますか/なぜそれが起こるのか知っていますか?

4

3 に答える 3

4

これが発生する理由は、ボックスの周りに「フレーム」を作成しているためです。

木製の額縁を考えてみてください。フレームを作成するために 4 つの長方形の木片を使用するのではなく、4 つの台形の木片を使用してそれらを組み合わせます。片側の幅を大きく設定すると、ボックスの隅に向かって斜めに内側にレンダリングされます。

見栄えが悪いのは、境界間のアンチエイリアシングがこれまでにないほど優れているためです。

別

div:before{border-left: 15px solid #000;}境界線をそのようにトリミングしたくない場合は、そうすることができます。

于 2012-06-04T18:30:05.257 に答える
3

それは「グリッチ」ではありません - それは国境がどのように機能するかです. それらは斜めに接続します。

さらに一歩進めて、<div>高さと幅のない大きな境界線を作成すると、結果を見ることができます - http://jsfiddle.net/mFzrA/

ところで - これは、純粋な CSS の三角形と吹き出しを作成するために使用されている手法です。境界線の 3 つを透明にするだけで、4 つ目は素敵な三角形になります。

于 2012-06-04T18:32:12.720 に答える
2

「ぎざぎざの線」を避けるために、境界線に大きな境界線幅のボックスシャドウを使用することを提案したかっただけです。私のために働く、それが役立つことを願っています:)

div {
    height            : 25px;
    width             : 50px;
    background        : #eee;
    border-style      : solid;
    border-color      : green;
    border-width      : 3px 3px 3px 0px;
    box-shadow:-15px 0px black;
}
于 2014-05-28T13:41:49.077 に答える