👨🏿‍🌾 🌽 👍🏿 フィレットブロッキングの39番目の方法。 1つのタグ、1つの写真。 🚐 📏 🤹

数日前、私はブロックを丸める38の方法についての記事に出会いました。本当に気に入りました。しかし、そこに私は約1年間使用していた方法を満たしていませんでした。追加のタグは不要で、画像（スプライト）を1つだけダウンロードする必要があります。最新のすべてのブラウザーとIE6 +で動作します

この方法は、周囲に連続した背景があり、フレームがないブロックに適用できます（ただし、ブロック自体の背景は任意です）。

実際には、ハイライトは、スプライトがブロックに配置される方法であり、幅も高さも固定されていません。これは、次のコードによって実現されます。

  / *このクラスをブロックに適用して、丸めます* /
  .rounded {
    背景：#feb;
    パディング：20px;
    マージン：30px auto 10px auto;
     text-align：center;
    オーバーフロー：非表示;
  }
  .rounded：before、.rounded :: before、.rounded：after、.rounded :: after {
    ディスプレイ：ブロック;
    高さ：20px;
    内容：url（img / corners.gif）;
    背景：url（img / corners.gif）右上の繰り返しなし;
    マージン：-30px -30px 10px -30px;
    パディング：0;
    テキスト揃え：左;
    行の高さ：0;
    フォントサイズ：0;
    オーバーフロー：非表示;
  }
  .rounded：after、.rounded :: after {
    マージン：10px -30px -30px -30px;
  }

HTML自体は次のようになります。

  <！DOCTYPE html PUBLIC '-// W3C // DTD XHTML 1.0 Strict // EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
 <html>
  <head>
   <title>角丸</ title>
   <meta http-equiv = "Content-type" content = "text / html; charset = utf-8" />
   <link type = "text / css" rel = "stylesheet" media = "screen" href = "styles.css" />
   <！-[IE 8の場合]> 
   <script src = "http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type = "text / javascript"> </ script> 
   <！[endif]->
  </ head>
  <本体>
   <div class = "rounded">
    このブロックには丸い角が必要です
   </ div>
  </ body>
 </ html>

:: afterおよび:: beforeの使用に注意を払う必要はありません-これは、この標準コードをIEに適合させるDan Edwardsライブラリが正しく機能するために必要なことです。ところで、私はこのライブラリを、最も人気のあるブラウザーの多くの不快な機能の処理に強くお勧めします。

実際にはそれだけです。アーカイブへのリンクを実行可能な例とともに提供することは残っています。

コメントを待っています。

UPD：このメソッドは、標準の互換モード、つまり適切なDOCTYPEでのみ機能します。 まだquirksモードでコードを書いている人のために、この方法はまだ適応されていません。

UPD2： pepelsbeyが発見したように、ダンエドワーズライブラリは、大量のCSSを使用するIEでクラッシュする可能性があります。 そのため、現時点では、指定されたCSS2コードをIEに正しく認識させる別の方法が必要です。

フィレットブロッキングの39番目の方法。 1つのタグ、1つの写真。

More articles: