検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3シャドウボックス・シャドウの使い方とテクニックまとめ_html/css_WEB-ITnose

CSS3シャドウボックス・シャドウの使い方とテクニックまとめ_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:40:081253ブラウズ

この記事は http://blog.csdn.net/freshlover/article/details/7610269 から抜粋したものです

text-shadow はテキストに影の効果を追加するもので、box-シャドウは要素ブロックのシャドウ効果に周囲を追加することです。 html5 と CSS3 の普及により、この特殊効果の使用はますます一般的になってきています。

基本構文は {box-shadow:[inset] x-offset y-offset Blur-radius Spread-radiuscolor}

オブジェクトセレクター {box-shadow:[projection Method] X 軸オフセット Y 軸オフセット Shift Shadow Blur Ra​​dius Shadow Expand Radius Shadow Color}

box-shadow 属性のパラメータ設定値:

Shadow type: このパラメータはオプションです。値が設定されていない場合、デフォルトの投影方法は外側のシャドウです。一意の値「inset」が使用されている場合、投影は内側のシャドウです。

X-offset: シャドウの水平オフセット。その値は正または負です。値が正の場合、影はオブジェクトの右側にあります。値が負の場合、影はオブジェクトの左側にあります。

Y オフセット: 影の垂直オフセット。ポジティブでもネガティブでも。正の値の場合、影はオブジェクトの下部にあります。値が負の場合、影はオブジェクトの上部にあります。

シャドウのぼかし半径: このパラメータはオプションですが、その値は次のとおりです。値が 0 の場合、影にぼかし効果がないことを意味します。

影の拡張半径: このパラメータはオプションであり、値は正または正の値になります。値が正の場合は影全体が拡張され、それ以外の場合は影の色: このパラメータはオプションです。色が設定されていない場合、ブラウザはデフォルトの色を使用しますが、各ブラウザのデフォルトの色は一貫性がありません。特に、Webkit カーネルの Safari および Chrome ブラウザでは透明色が、Firefox/Opera では黒色になります (検証済みであるため)、このパラメータを省略しないことをお勧めします。

ブラウザの互換性:

さまざまな主流ブラウザと互換性を持ち、これらの主流ブラウザの下位バージョンをサポートするには、Webkit に基づいた Chrome や Safari などのブラウザで box-shadow 属性を使用する場合、Write が必要です。 -webkit-box-shadow 形式のプロパティの名前。 Firefox ブラウザは、-moz-box-shadow の形式で記述する必要があります。

[css]

プレーンコピーを表示

.box-shadow{
  3. -moz-box-shadow: 投影法 X 軸オフセット量 Y 軸オフセット シャドウブラー半径シャドウ拡張半径シャドウカラー
  5. //Safari および Google chrome10.0-
  7. シャドウ拡張半径カラー; Y 軸オフセット量 シャドウブラー半径 シャドウ拡張半径 シャドウカラー
  9. }
  12. 注: 便宜上、以下の CSS 属性の一部の場所では、box-shadow 属性のみが記述され、webkit- prefix の形式では -moz- と - は記述されません。 , 使用するときは忘れずに追加してください。
  14. box-shadow の特性をより明確に理解するために、いくつかの小さなテストを実行して効果を確認してください:
  15. 関連コード:

[html]

view plain copy

  1. 8b05045a5be5764f313ed5b9168a17e6  
  2. 100db36a723c770d327fc0aef2ce13b1  
  4.   
  5. 85c74d2775b1758cffdee750cf6c57e7  
  6. b2386ffb911b14667cb8f0f91ea547a7CSS3 プロパティ：box-shadow测试6e916e0f7d1e588d4f442bf645aedb2f  
  7. 8683959807b76583f9396b3739cc8f192cacc6d41bbb37262a98f745aa00fbf0  
  8. 3717216febe539ec702ff84ddc8d38712cacc6d41bbb37262a98f745aa00fbf0  
  9. 080b747a20f9163200dd0a7d304ba388  
  10. .box-shadow-1{
  11. -webkit-box-shadow: 3px 3px 3px;  
  12. -moz-box-shadow: 3px 3px 3px;  
  13. box-shadow: 3px 3px 3px;  
  14. }
  15. .box-shadow-2{
  16. -webkit-box-shadow:0 0 10px #0CC;  
  17. -moz-box-shadow:0 0 10px #0CC;  
  18. box-shadow:0 0 10px #0CC;  
  19. }
  20. .box-shadow-3{
  21. -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  22. -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  23. box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  24. }
  25. .box-shadow-4{
  26. -webkit-box-shadow:0 0 10px 15px #0CC;  
  27. -moz-box-shadow:0 0 10px 15px #0CC;  
  28. box-shadow:0 0 10px 15px #0CC;  
  29. }
  30. .box-shadow-5{
  31. -webkit-box-shadow:inset 0 0 10px #0CC;  
  32. -moz-box-shadow:inset 0 0 10px #0CC;  
  33. box-shadow:inset 0 0 10px #0CC;  
  34. }
  35. .box-shadow-6{
  36. box-shadow:-10px 0 10px red, /*左边阴影*/
  37. 10px 0 10px yellow, /*右边阴影*/
  38. 0 -10px 10px 青,/*顶部阴影*/
  39. 0 10px 10px green; /*底边阴影*/
  40. }
  41. .box-shadow-7{
  42. box-shadow:0 0 10px 5px black,
  43. 0 0 10px 20px red;  
  44. }
  45. .box-shadow-8{
  46. box-shadow:0 0 10px 20px 赤、
  47. 0 10px 5px 黒;  
  48. }
  49. .box-shadow-9{
  50. box-shadow: 0 0 0 1px red;  
  51. }
  55. .obj{
  56. 幅:100px;  
  57. 高さ:100ピクセル;  
  58. マージン: 50px 自動;  
  59. 背景:#eee;      
  60. }
  61. .outer{
  62. 幅: 100px;  
  63. 高さ: 100ピクセル;  
  64. 境界線: 1px 赤一色。  
  65. }
  66. .inner{
  67. 幅: 60px;  
  68. 高さ: 60ピクセル;  
  69. 背景色: 赤;  
  70. -webkit-box-shadow: 50px 50px blue;  
  71. -moz-box-shadow: 50px 50px blue;  
  72. box-shadow: 50ピクセル 50ピクセル ブルー;  
  73. }  
  74. 531ac245ce3e4fe3d50054a55f265927  
  75. 9c3bca370b5104690d9ef395f2c5f8d1  
  76.   
  77. 6c04bd5ca3fcae76e30b72ad730ca86d  
  78.     4e17d5395a9fd855d8f2eb38415e3ab816b28748ea4df4d9c2150843fecfba68  
  79.     ee9ceb6a8992b0406a673fa9705c68bb  
  80.         e19b3217ccbbf7f4b7b9ceb7e76c47e516b28748ea4df4d9c2150843fecfba68  
  81.     16b28748ea4df4d9c2150843fecfba68  
  82.     c2cf73f55e2bc9566cfea48d0c8387e316b28748ea4df4d9c2150843fecfba68  
  83.     038401daeca7549156ee05f2c147c47a16b28748ea4df4d9c2150843fecfba68  
  84.     c65d15247fdc036cced1ec16cb930a3816b28748ea4df4d9c2150843fecfba68  
  85.     ef3eaacff8a6c4f21bc44d4439e5761816b28748ea4df4d9c2150843fecfba68  
  86.     18364b2e23a31eef589b21d1e6755a6f16b28748ea4df4d9c2150843fecfba68  
  87.     8cd6161b7ca7cb08f1126a0867c00ae116b28748ea4df4d9c2150843fecfba68  
  88.     d697da8a2692d7b85f4f1bd56ca7bc5816b28748ea4df4d9c2150843fecfba68  
  89.     fbe5d99444805505a0bc61413911d36c16b28748ea4df4d9c2150843fecfba68
  90. j').boxShadow (-10,-10,5,"#0cc") //obj 要素は box-shadow を使用します。
  91. ;
  92. 2de8709fe07ac75b62c10c2f197b64969c3bca370b5104690d9ef395f2c5f8d1 に次のコードを記述します:

    このスクリプトの欠点は、IE がその一部しかサポートしていないことです。ボックスシャドウの値。注:

    この htc ファイルを使用した後、CSS に box-shadow、-moz-box-shadow、または -webkit-box-shadow が記述されている限り、IE はそれをレンダリングします。

    この htc ファイルを使用する場合、box-shadow: 0 0 10px red; と書くことはできません。そうでないと、IE では失敗します。 RGBA値のアルファ透明度はサポートされていません。

    はめ込みインナーシャドウには対応していません。

    シャドウ拡張はサポートされていません。

    他の色を設定しても、IE では影は黒でのみ表示されます。

    方法 3: jQuery プラグイン jquery.boxshadow.js を使用します。
  93. プラグインのダウンロード アドレスは http://www.hintzmann.dk/testcenter/js/jquery/boxshadow/jquery.boxshadow.js です。
  94. 使用方法は非常に簡単です シンプルで、このファイルとjqueryバージョンのライブラリをheadタグに導入し、次のjsエフェクトコードを挿入します:
    97. [javascript]
  97. view plain copy