1は、ダミーシャドウボックスクラスを実装し、アニメーション/遷移ボックスシャドウを使用することができます知ら箱-shadowプロパティを、シャドーボックスの効果を達成するが、その後、ここで提示より再描画、消費シャドーボックス擬似要素の透明性を修正することによって達成される
実装原理を：
で非デフォルト値がその値から更新されるように、透明度を変更し、それが任意の再描画伴わない
本明細書に提供されるが、空のダミー要素は、0の隠れた影の透明性を配置し、その後、マウスは、その透明度を回復置いて、次の従来の疑似比較のクラスは、コード実装
<DIV CLASS =「前」> <H1>前</ H1> <P>アニメーション/遷移ボックスシャドウボックスシャドウプロパティ/ <シャドウボックスの効果を達成するために使用されるが、より多くの再描画を消費することができますP> </ div> <時間 > <H1>後</ H1> <P> "の後に" /> <DIVクラス= 再描画を消費されない擬似要素の透明度を変更することによって、同じ効果を達成するために</ P> < / DIV>
.before {パディング：1EM。背景色：#FFF; -webkit-遷移：0.2秒。遷移：0.2秒;}前：ホバー{ボックスシャドウ：0 0 0 10pxのRGBA（0、0、0、0.3）;}後{位置：相対。パディング：1EM。背景色：#FFF;}後：{コンテンツの前に： ""。位置：絶対; トップ：0; 右：0; 下：0; 左：0; Zインデックス：-1。ボックスシャドウ：0 0 0 10pxのRGBA（0、0、0、0.3）。不透明度：0; 意志変更：不透明度。-webkit-遷移：0.2秒。遷移：0.2秒;}後：ホバー：1;}：{不透明前
2、伪元素：实现的面包屑导航栏前<ULクラス= "パンくず"> <LI> <a href="#">ホーム</a>の</ LI> <LI> <a href="#">写真</a>に</ LI> <LI> <a href="#">夏15 </a>の<
ul.breadcrumb {パディング：16pxに8px;リストスタイル：なし;背景色：#eee;} ul.breadcrumb李{表示：インライン;} ul.breadcrumb用のLi +のリチウム：{パディング前：8px;色：黒。 コンテンツ：「/\00a0";}ul.breadcrumbリチウムのA {色 ：緑;}
効果：
3、矢印擬似クラスの後に実装
実装原理：三つの境界線を設定し、境界方向矢印ポイントが設けられておらず、位置主境界色（大）/主背景色（小）として境界の両側の矢印側に、（透明）透明で着色し、我々は、三角矢印の境界線の色を持っているので、第1の矢印（大きいですa）は、エッジの残りの部分によって正確カバレッジ後の第二の矢印（小さい）によって合成矢印境界によって覆われ、その色は、調整可能なより大きな三角形の矢印の色であるれていません。本体と共に、位置決めオフセットが負の色が本体の色に設定されなければならない小さな三角矢印は、車体フレームがカバーされるべきであるように
、<DIVクラス=「コンテナー」> <IMG ALT =「」 SRC = 'のhttp：//placehold.it/400x200'>の<divクラス= '矢印左'> </ div> </ div> <divのクラス= 'コンテナ新しい'>の<divクラス= '矢印右' > </ div> <IMG ALT = ''
.arrow左：{Zインデックス前：9999。内容： ""; 表示ブロック; 幅：0; 高さ：0; border-top：20ピクセル固体透明。ボーダー底：20ピクセル固体0PX;}
関係するその他の技術情報：gzitcast