クライアントでの写真のコーナーの実際の丸め

htmlレイアウトの角の丸みについてはあまりにも多くのことが言われています。見出しを読んで皮肉な笑みを浮かべ、「25をもう一度、可能な限り...」と思う人を理解しています。 したがって、私はその本質を要約しようと試みます、そして、あなたが以前にこの方法をほとんど見ることができなかったとすぐに警告します。

挑戦する

要するに、タスクは特定の背景と特定のフレームの角の丸みをシミュレートすることではなく、背景と画像のサイズに関係なく、画像の角の実際の丸みを実現することであり、フレームと丸みの半径を指定する機能を備えています。 もちろん、これはIE6を含むすべてのブラウザーで動作するはずです。

決定プロセス

まあ、一見、タスクは単に非現実的であり、非常に長い間、特定の背景の特定の半径のコーナーを切り取り、写真の上に置くたびに、私はそれを解決しようとさえしませんでした。 しかし、かつて、私はこの問題に真剣に取り組み、レイアウトの分野でのすべての忍耐力と知識を駆使することにしました。



IE6-8でサポートされていないことを忘れるまで、長方形の画像を「正直に」丸くするために、コーナーを削除できます。CSS3プロパティのborder-radiusのみが削除できると言い始めました。



そして、未知のサイズの写真を撮り、それに境界半径を適用します。



HTML：

< img class ="b-img-radius" src ="i/tmp/1.jpg" />



* This source code was highlighted with Source Code Highlighter .

CSS：

/* IMG radius */



.b-img-radius {

border: 1px solid #000;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}



/* ----------- */



* This source code was highlighted with Source Code Highlighter .

取得するもの：







必要なものではありませんが、フレームはそれ自身の人生、そのイメージを生きています。 別の方法で試して、inline-block要素の背景に画像を配置しますが、画像サイズを設定する必要があります。



HTML：

< div class ="b-img-radius" style ="background: url(i/tmp/1.jpg); width: 250px; height: 167px" ></ div >



* This source code was highlighted with Source Code Highlighter .

CSSは同じです。



取得するもの：







良いのですが、丸めは機能しますが、サイズをまったく指定したくないので、インラインブロック要素内でサイズを指定せずに同じ画像を挿入し、可視性で非表示にします：hidden; そのため、彼女は私たちのブロックを希望のサイズに背景で破裂させます。



HTML：

< div class ="b-img-radius" style ="background: url(i/tmp/1.jpg)" >< img src ="i/tmp/1.jpg" /></ div >



* This source code was highlighted with Source Code Highlighter .

CSS：

/* IMG radius */



.b-img-radius {

zoom: 1;

position: relative;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

display: inline-block;

vertical-align: top;

}



.b-img-radius img {

display: block;

visibility: hidden;

}



/* ----------- */



* This source code was highlighted with Source Code Highlighter .

一見、画像へのパスを複製するのは見苦しいですが、特にこの要素は普遍的であるため、価値があると思います。プロジェクトの別のコントロール/ヘルパーに取り出すことができ、コードが美しくなります。

しかし、IEはどうですか？

バナリティのポイントまではすべて簡単です。 境界半径を含む、VML上のIE6-8の多くのCSS3プロパティを実装する非常に強力なCSS3 Pieライブラリがあります。これは信じられないほど単純で、重さはわずか28kbです。 必要なのは、CSSに行を追加することだけです。

/* IMG radius */

.b-img-radius {

.......



behavior: url(css/PIE.htc);

}



* This source code was highlighted with Source Code Highlighter .

IE6はこれに簡単に対処し、ページ上に10個を超える要素が存在しても速度を低下させませんが、主なことは、VMLオブジェクトを追加しても画像のクリック性に影響しないことです。 たとえば、divを次のものに置き換えるだけで、リンクにすることができます。



HTML：

< a href ="#" class ="b-img-radius" style ="background: url(i/tmp/1.jpg); width: 250px; height: 167px" >< img src ="i/tmp/1.jpg" /></ a >



* This source code was highlighted with Source Code Highlighter .

まとめ

その結果、必要なものを手に入れました。要素は通常の画像のようにインラインのままであり、画像自体が必要なスペースを取るサイズを指定する必要はありません、コーナーの丸みの半径を柔軟に変更でき、CSSを介して任意のサイズと色のフレームを設定または設定できません画像がどのような背景に置かれているのかを考えてください。また、注意（！）、box-shadowを使用して影を設定できます。これはIE6 ++でも機能します。



最後の例 、（ Mirror1 ）



ブラウザー間の互換性：IE6 ++およびFF、Opera、Chrome、Safariのすべての最新バージョン。



このコンポーネントは、 独立したブロックを構成する人に理想的であり、キットに追加すると、人生が大幅に簡素化されます。



同僚の皆さんの質問にお答えできることを嬉しく思います。