DIV CSS3 box-shadow オブジェクトのボックス シャドウとピクチャ シャドウ (コード例)

この記事は DIV CSS3 の box-shadow オブジェクトのボックス シャドウとピクチャー シャドウに関するものです (コード例)。参考にしてください。お役に立てば幸いです。

1. CSS スタイルの単語と使用構文

1. ボ​​ックス シャドウ スタイルの単語: box-shadow

2. 境界線の間隔を表します。左0、上0、1pxの影範囲の影色は黒(#000)で、インセットありの場合はボックスの内側の影を表し、インセットなしの場合はボックスの外側の影を表します。

注:

box-shadow:0px 0px 1px #000

最初の値が 0 の場合、左右の境界線の影が 1px の範囲であることを意味します
最初の値は正の整数で、左境界の影を意味します。
最初の値は右境界の影を表す負の整数です。
同様に
2 番目の値は 0 で、上下の境界の影を表します
2 番目の値は、上境界線からの 1px の影の距離を表す正の整数です。
最初の値は、下境界線の影の設定を表す負の整数です。

3。

##ブラウザ互換性一覧表

##2. pCSS5 の場合

pCSS5 では、p ボックスと画像 IMG にそれぞれインナーシャドウとアウターシャドウをケースとして設定します。

1. Case HTML コード

p{box-shadow:0 0 1px #000 inset;}

2. Case CSS コード

nbsp;html> 
 
 
<meta> 
<title>对象阴影 在线演示 DIVCSS5 VIP</title> 
<link> 
<!-- www.divcss5.com --> 
 
 
<div>盒子对象阴影测试</div> 
<div>DIV盒子内阴影</div> 
<div>图片对象阴影测试</div> 
<div><img  src="/static/imghwm/default1.png" data-src="images/45.gif" class="lazy" alt="DIV CSS3 box-shadow オブジェクトのボックス シャドウとピクチャ シャドウ (コード例)" ></div> 
 

p オブジェクトの内側のシャドウ効果と画像の外側のシャドウ効果をそれぞれ設定します

3. ケースのスクリーンショット

p内側のシャドウと CSS イメージの外側のシャドウ効果のスクリーンショット

4 注: アプリケーションは IE9 でテストする必要があります。およびそれ以上のブラウザ、または Google、Apple ブラウザがテストされるまで待ちます

5. CSS3 オンライン デモ: (IE9 以降のブラウザ、Google およびその他のブラウザでテストされます)

3.

##1. CSS3 マニュアル

#http://www.php.cn/course/45.htm

2 に対応します。 CSS3 属性は IE9 未満の IE ブラウザではサポートされていません 互換性がないため、設定後は IE9 以降のブラウザのみに対応するため、使用する場合は慎重に選択してください。

3. 通常、CSS3 スタイルは下位バージョンに関係なく使用され、淘宝樹花散で使用される影や角丸などは IE9 以降のブラウザでも見ることができますが、CSS3 スタイルの効果は下位バージョンでは見ることができません。ブラウザ。

上記は完全な紹介です
CSS3 ビデオ チュートリアル

について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がDIV CSS3 box-shadow オブジェクトのボックス シャドウとピクチャ シャドウ (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。