CSSを使用して斜めの画像を作成します-jsチュートリアル-php.cn

CSSを使用して斜めの画像を作成します

キーテイクアウト

CSSを使用して斜めの画像を作成するための4つの異なる手法があり、それぞれがさまざまなレベルのブラウザーサポートを提供しています。すべての方法は、画像上に黒と白の境界線をオーバーレイし、それらを不透明に混ぜるという同じ原則に基づいています。
beveled画像は、深さとリアリズムの感覚を追加することにより、ウェブデザインの視覚的な魅力を高めることができます。この効果は、画像または要素の境界特性を操作することで実現できます。 Box-ShadowやBorder-Imageなどの追加のCSS3プロパティを使用して、より複雑で現実的なベベル効果を作成できます。
メソッドが必要でした。通常の境界（左下の

）で通常の初期の感覚を作成するのは簡単ですが、私は実際に画像の一部のように見える効果の後でした。 1つのブラウザ、IE6に戻るすべてで機能する最も堅牢なもの手法1：画像で生成されたコンテンツを使用する（デモ）

プロ：ウルトラクリーンテクニックは追加のマークアップを必要としません
cons：画像の上に。次に、オーバーレイ要素に境界線を追加し、RGBA

img.beveled{    position:relative;}img.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    box-sizing:border-box;    width:100%;    height:100%;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

ログイン後にコピー

長所：サポートされているブラウザのより広い範囲

<img     alt="A legion of Lego Stormtroopers, standing in formation." />

ログイン後にコピー

Cons：追加のマークアップと明示的な寸法が必要です

2番目のテクニックは本質的に同じですが、この時間は、レッパーの生成コンテンツを使用してオーバーレイ要素を作成します。この手法では、ラッパー要素と生成されたコンテンツの明示的な寸法の定義を開始する必要があります（生成されたコンテンツでボックスサイズのベンダー固有のバージョンを使用できますが、ラッパーの寸法を定義する必要があります。

長所：最も視覚的に魅力的なテクニック

cons：Firefox 3.5以降でのみ動作します

3番目の手法は、2番目の手法からの転換です。ここでは、RGBAを使用する代わりに、-MOZ-Box-Shadow：Insetを使用してbevering効果を作成します。 Box Shadow EffectsにはAlpha （すべての点で同じ不透明度ではなく）があるため、全体的な効果ははるかにきれいで丸みがあります。また、スプレッド半径パラメーターを微妙に使用してコーナーのシャープネスをブレンドできます。この効果は、Firefox 3.5以降でのみサポートされています。 SafariはBox-Shadowを実装していますが（Webkit-Box-Shadowとして）、挿入図のサポートはありません：

img.beveled{    position:relative;}img.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    box-sizing:border-box;    width:100%;    height:100%;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

ログイン後にコピー

とにかくウェブキット版を追加できたと思いますが、それは将来の実装がどのようなものであるかを知ることができないのでリスクになります。寸法

<img  src="stormtroopers.jpg"     alt="A legion of Lego Stormtroopers, standing in formation." />

ログイン後にコピー

4番目と最終的な手法は、最もクロスブラウザー互換性がありますが、最もHTML

の変更も必要です。それは本質的に2番目の手法と同じですが、2つの重要な違いがあります。まず、生成されたコンテンツではなく、2番目の物理を使用します。第二に、それはRGBA

境界色の色を使用し、その後、要素全体を不透明度とブレンドします。インターネットエクスプローラーでさえ、これを処理できます。
さらなる開発

カラフルな境界線を使用してジェルのような効果を得ることでこれをさらに進めることができます。一緒に遊ぶのは確かにとても楽しかったです！ CSSを使用して斜めの画像を作成することについてのよくある質問（FAQ） CSSの面白された画像とは？

span.beveled{    position:relative;    width:200px;    height:200px;    display:block;}span.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    width:190px;    height:190px;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

ログイン後にコピー

<span >    <img src="stormtroopers.jpg"         alt="A legion of Lego Stormtroopers, standing in formation." /></span>

ログイン後にコピー

CSSの斜めの画像は、3次元のエッジを画像または要素に錯覚させる視覚効果です。この効果は、画像または要素の境界特性を操作することによって達成されます。ベベル効果は、Webデザインに深さとリアリズムの感覚を追加し、ユーザーにとってより視覚的に魅力的なものになります。

CSSを使用してbevered画像を作成するにはどうすればよいですか？

CSSを使用してbevered画像を作成するには、画像の境界特性を操作することが含まれます。ボーダースタイルのプロパティを使用して、ボーダーのスタイルを「ソリッド」、「ダブル」、「点線」、「破線」、「溝」、「リッジ」、「挿入図」に設定できます。「グルーブ」、「リッジ」、「挿入図」、および「冒頭」スタイルは、魅惑的な効果を生み出すことができます。また、境界線と境界線の特性を使用して、それぞれ境界のサイズと色を調整することもできます。

CSS3を使用して斜めの画像を作成できますか？

はい、CSS3を使用してbeveled画像を作成できます。 CSS3は、より複雑で現実的なベベル効果を作成するために使用できる新しいプロパティと値を導入します。たとえば、Box-Shadowプロパティを使用して境界線に影を追加して、より顕著なBevel Effectを作成できます。また、Border-Imageプロパティを使用して境界線に画像を適用して、テクスチャのあるベベル効果を作成することもできます。

CSSのコンテンツボックスのベベルエフェクトの作成は、包まれた画像を作成することに似ています。ボーダースタイル、境界線、境界線の特性を使用して、ベベル効果を作成できます。また、Box-Shadowプロパティを使用して境界線に影を追加して、ベベル効果を高めることもできます。さらに、Border-Radiusプロパティを使用してコンテンツボックスの角を丸くし、より微妙で洗練されたベベル効果を作成できます。国境スタイルのプロパティを使用して、ボーダーのスタイルを設定できます。「グルーブ」、「リッジ」、「挿入図」、および「冒頭」スタイルは、魅惑的な効果を生み出すことができます。また、境界線と境界線の特性を使用して、境界線のサイズと色を調整することもできます。さらに、Box-Shadowプロパティを使用して境界線に影を追加して、Bevel Effectを強化します。
CSS3にベベル効果を作成するには、新しいプロパティと値を使用する方法が含まれます。 Box-Shadowプロパティを使用して、境界線に影を追加して、より顕著なベベル効果を作成できます。また、Border-Imageプロパティを使用して境界線に画像を適用して、テクスチャのあるベベル効果を作成することもできます。さらに、ボーダーラジウスプロパティを使用して要素の角を丸くし、より微妙で洗練されたベベル効果を作成できます。境界特性を操作することにより、画像に3次元のエッジの幻想を与えるベベル効果を作成できます。境界スタイル、境界線、境界線の特性を使用して、ベベル効果を作成できます。「グルーブ」、「リッジ」、「挿入図」、「アウトセット」スタイルは、beveled効果を作成できます。

CSS3のコンテンツボックスのベベル効果を作成できますか？ CSS3は、より複雑で現実的なベベル効果を作成するために使用できる新しいプロパティと値を導入します。たとえば、Box-Shadowプロパティを使用して境界に影を追加して、Bevel Effectを強化できます。また、Border-Imageプロパティを使用して境界線に画像を適用して、テクスチャのあるベベル効果を作成することもできます。
CSSでテクスチャのベベル効果を作成するにはどうすればよいですか？

CSSでテクスチャのベベル効果を作成するには、Border-Imageプロパティの使用が含まれます。このプロパティを使用すると、要素の境界に画像を適用できます。テクスチャのある画像を選択することにより、テクスチャのベベル効果を作成できます。また、ボーダーイメージスライスプロパティを使用して、画像の境界画像に分割される方法を指定することもできます。