0

流動的で柔軟な湾曲したコーナー ボックスを作成したいと考えています。理想的には、コンテンツがボックスの上部/下部に表示されるように、汎用性が高い必要があります。

当然、4 つの要素 (div) と 1 つの画像を使用できるはずです。IE6 を除いて、ほぼすべてのブラウザーでこれを機能させることができます。

http://www.schillmania.com/projects/dialog2/basic.htmlのコードを変更 して、次のマークアップと css を作成しました。

<div class="boxtl boxcontent">
    <div class="boxtr boxcontentside">tr</div>
        <p>This is the top half of the box</p>
        <p> content! </p>
        <p> content! </p>
</div>
<div class="boxbl boxcontent2">
    <div class="boxbr boxcontentside">br</div>
        <p>This is the bottom half of the box</p>
        <p> content! </p>
        <p> content! </p>
</div>


.boxtl, .boxtr, .boxbl, .boxbr {position:relative; zoom:1; background: url(../revised-images/testbox2.png) no-repeat 0 0; _background: url(../revised-images/testbox2ie.png) no-repeat 0 0; height:auto;}
.boxtl {margin-right:20px; }
.boxtr {margin-right:-20px; width:20px; height:20px; position:absolute; left:100%; top:0;  background-position: 100% 0; }
.boxbl {margin-right:20px; background-position: 0 100%;}
.boxbr {margin-right:-20px; width:20px; position:absolute; left:100%; top:0; background-position: 100% 100%;}
.boxcontent {padding:20px 0 1px 20px; position:relative; zoom:1; _overflow-y:hidden; width:auto;}
.boxcontentside {height:100%; _height:2000px;}

大きな単一のボックス画像 (2000px H/W) を使用しました。この方法のアイデアは、アルファ透明度 (コーナー、シャドウなど) をオーバーラップなどなしで使用できるということです。

.

問題は IE6 です。背景画像の垂直方向の配置に似た処理を拒否します。上位 2 つの div (.tl と .tr) の背景位置を上から 50% に変更しようとしましたが、IE6 では 0 のままです。

フル/ロングハンドの背景プロパティ (background-image/background repeat/background-position) を使用してみました。また、x/y バージョン (background-position-x/background-position-y) などを試しました。

_height: または _overflow-y: プロパティを使用して IE が必要な高さを伸ばすようにすると、画像を垂直方向に配置する機能が損なわれるようです。

これどうやってするの？

4

1 に答える 1

1

コメントで@Danが述べたように、丸みを帯びた角にこの種の角画像手法を使用するべきではありません。

これにはCSSプロパティborder-radiusを使用する必要があります。

IE6-8はをサポートしていませんが、 CSS3Pieborder-radiusスクリプトを使用して、これらの古いバージョンのIEにこのプロパティのサポートを追加できます。

これで、余分なマークアップや不要なクラス、ヘアリーなCSSは必要ありません。

CSS3Pieの利点は、IEでのみ実行されることです。他のすべてのブラウザーでは、純粋なCSSを使用し、CSS3Pieスクリプトを無視します。IEでは、はい、これはjavascriptソリューションですが、軽量であり（通常、コーナー用に複数の画像ファイルをダウンロードするよりも軽量です）、実行されない場合、フォールバックは単純な正方形のコーナーです。正確には世界で最悪のことではありません。

また、IEに他の多くの便利なCSS3機能のサポートを追加します。

CSS3Pieのダウンロードの重みが大きすぎる場合（33k）、同じことを行うが機能が少ない他の同様のプロジェクトがいくつかあります。CSS3Pieが登場する前は、代わりにHTMLRemixのものをお勧めしていました。それは約5kですが、それほど良くはありません。

于 2011-07-01T11:57:22.830 に答える