レイアウトで角を丸くする方法はたくさんあります。 そして、すべてのブラウザポーリングが
border-radiusプロパティのサポートを開始するまで、特定のプロジェクトでどのメソッドを使用するかについて考える必要があります。
固定サイズのブロック基板の使用から、vmlまたはsvgを使用したコーナーの作成まで、さまざまな方法があります。 このトピックでは、この主題に関する多くの情報があるため、よく知られている方法については検討しません。 さらに別のメソッドを作成してみました。
すぐに予約します。私の方法は万能薬ではなく、いくつかの欠点があります。これらについて詳しく説明します。
簡単に説明します。
理論
角が丸いブロックを作成する必要があるとしましょう。
私の意見では（私は「私の」と言いますが、まだこの方法を満たしていないので、もし正しい場合）、3つのディーバと1つの画像が必要です。
たとえば、簡単な絵を描いてみましょう。
そして彼女の
コーナーを呼び出すその上に4つのコーナーがあり、1つのスプライトで立ち往生しています。
この場合、私は16ピクセルに等しい画像幅を取りました-通常の場合は1emに等しいです。
この値は覚えておく必要があります-1つの「クォンタム」の幅であり、他のすべてのサイズはその倍数であるか、2、3倍に減少するためです-0.5、0.25、0.125 ...
ここで、固定サイズのブロック（たとえば、20emから3em）があるとします。
彼にスタイルを付けると
背景：url（corners.png）繰り返し;
その後、最終的に次の結果が得られます。
次のステップは、この中にコンテナを追加することです。 今のところ、概略を示します：
ご覧のとおり、このコンテナの幅は親の100％（水平および100％-1量）であり、通常は親コンテナの背景と重なります。
同じ方法を使用して、作成したものに別のコンテナーを作成します。
ご覧のとおり、そのようなブロックの高さは親から100％+ 1クォンタムで、幅は100％-1クォンタムです
これがメソッド全体です。
実装
この場合のマークアップ自体は、言われたように見えます-せいぜい3 div
<div class = "panel">
<div class = "h">
<div class = "v"> Hello world、私はリンゴとプラムが好きな美しい男です</ div>
</ div>
</ div>
cssファイルもそれほど複雑ではありません。 この場合のcssはコンテンツの動的な高さ（高さはクォンタムの倍数）であることを考慮する価値がありますが、固定の高さで実行できます
.panel {
位置：相対;
float：左;
幅：19em！重要;
幅：20em; / * IA 6の場合* /
背景：url（corners.png）繰り返し;
パディング：0.5em 1em 0.5em 0！重要;
パディング：0.5em 0; / * IA 6の場合* /
}
.v {
背景：＃0f0;
位置：相対;
float：左;
フォント：1em / 1em Arial、Helvetica、sans-serif normal;
マージン：-0.5em 0;
パディング：0.5em 0;
幅：100％;
}
.h {
背景：＃00f;
位置：相対;
float：左;
幅：100％;
パディング：0 0.5em 0 0.5em;
}
私は思う-すべてが簡単であり、追加の説明は必要ありません。
その結果、優れた
browsershots.orgサービスから、すべてのブラウザーで同じ結果が得られたことがわかります。これは次のようになります。
短所
この方法の欠点は次のとおりです。
- このメソッドはフローティング幅では使用できません
- borderプロパティを使用するオプションはまだ解決されていません。
- 画像が必要
- 内側と外側のマージンで迷子になることがありますが、レイアウトが単純化されません
- この方法は万能薬ではなく、心の糧にすぎず、それぞれの場合に別々にコンパイルされます
長所
プラスよりもマイナスが多いように見えるかもしれませんが、それはあなた次第です。 メッシュ設計を使用する場合、この方法は
（私の意見では）うまくいくでしょう。
UPD： デモを見ることができます