コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

矢印付きプロンプトボックスの概要例

WBOY
リリース： 2016-06-16 08:39:25
オリジナル
973 人が閲覧しました

プロンプト ボックスでもナビゲーション バーでも、上の図に示すように矢印の付いたフレームが表示されます。この矢印は背景画像または CSS を通じて実現できます。この記事では、プロンプト ボックスを実装する 3 つの方法を紹介します。 css を介して矢印を使用します。

  1. 境界線属性を介して
    アイデア: 2 つの三角形の差が境界線として 1 ピクセルになるように配置された 2 つの三角形。
  2. CSS3 変換
    アイデア: まず、2 つの辺が同じ色の正方形を作成し、それを特定の角度で回転して三角形になります
  3. 特殊文字 '♦'
    アイデア: 特殊文字が上部からはみ出して三角形のように見えます

1. 境界線属性を介して:

まず、幅と高さが 10 ピクセル、境界線が 10 ピクセルの div を作成しましょう。

<span style="color: #008080;">1</span> <span style="color: #800000;">width: 10px;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">height: 10px;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border: 10px solid;
</span><span style="color: #008080;">4</span> <span style="color: #800000;">border-color: red green yellow blue; </span>
ログイン後にコピー

以下に示すように:

画像の中央の空白部分は、設定した幅と高さです。0px に設定するとどうなりますか? 、以下に示すように:

このとき、左右と下の境界線の色を透明または背景色と同じ色に設定すると、希望の三角形が表示されます。以下に示すように:

次に、最初の画像のエフェクトを実現してみましょう:

CSS:

矢印付きプロンプトボックスの概要例
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.info </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">        margin-top</span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">        position</span>:<span style="color: #0000ff;">relative</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;">50px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">        line-height</span>:<span style="color: #0000ff;">60px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">        background</span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">        box-shadow</span>:<span style="color: #0000ff;">1px 2px 3px #E9D985</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">        border-radius</span>:<span style="color: #0000ff;">4px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">        text-align</span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">        color</span>:<span style="color: #0000ff;">red</span>;
<span style="color: #008080;">13</span>     }
<span style="color: #008080;">14</span> <span style="color: #800000;">    .nav </span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">        position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">        left</span>:<span style="color: #0000ff;">30px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">        overflow</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">20</span> <span style="color: #ff0000;">        border-width</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">21</span> <span style="color: #ff0000;">        border-style</span>:<span style="color: #0000ff;">solid dashed dashed dashed</span>;
<span style="color: #008080;">22</span>     }
<span style="color: #008080;">23</span> <span style="color: #800000;">    .nav-border </span>{
<span style="color: #008080;">24</span> <span style="color: #ff0000;">        top</span>:<span style="color: #0000ff;">-20px</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;">        border-color</span>:<span style="color: #0000ff;">transparent transparent #DACE7C transparent</span>;
<span style="color: #008080;">26</span>     }
<span style="color: #008080;">27</span> <span style="color: #800000;">    .nav-background </span>{
<span style="color: #008080;">28</span> <span style="color: #ff0000;">        top</span>:<span style="color: #0000ff;">-19px</span>;
<span style="color: #008080;">29</span> <span style="color: #ff0000;">        border-color</span>:<span style="color: #0000ff;">transparent transparent #F6F1B3 transparent</span>;
<span style="color: #008080;">30</span>     }
ログイン後にコピー
矢印付きプロンプトボックスの概要例

html: 

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="info"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>提示信息<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav nav-border"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav nav-background"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>
ログイン後にコピー

2. CSS3 変換

最初に、同じ色の 2 つの隣接する境界線と、他の 2 つの側面に 0px の境界線を持つ div ボックスを作成します。写真に示すように:

ボックスを 45 度回転すると、三角形のプロンプト効果を実現できます。

CSS:

矢印付きプロンプトボックスの概要例
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.info </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">        margin-top    </span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">        position      </span>:<span style="color: #0000ff;">relative</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">        width         </span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">        height        </span>:<span style="color: #0000ff;">50px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">        line-height   </span>:<span style="color: #0000ff;">60px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">        background    </span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">        box-shadow    </span>:<span style="color: #0000ff;">1px 2px 3px #E9D985</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">        border        </span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">        border-radius </span>:<span style="color: #0000ff;">4px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">        text-align    </span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">        color         </span>:<span style="color: #0000ff;">red</span>;
<span style="color: #008080;">13</span>     }
<span style="color: #008080;">14</span> <span style="color: #800000;">    .nav </span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">        position          </span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">        top               </span>:<span style="color: #0000ff;">-8px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">        left              </span>:<span style="color: #0000ff;">30px</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">        overflow          </span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">        width             </span>:<span style="color: #0000ff;">13px</span>;
<span style="color: #008080;">20</span> <span style="color: #ff0000;">        height            </span>:<span style="color: #0000ff;">13px</span>;
<span style="color: #008080;">21</span> <span style="color: #ff0000;">        background        </span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;">22</span> <span style="color: #ff0000;">        border-left       </span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">23</span> <span style="color: #ff0000;">        border-top        </span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;">        -webkit-transform </span>:<span style="color: #0000ff;">rotate(45deg)</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;">        -moz-transform    </span>:<span style="color: #0000ff;">rotate(45deg)</span>;
<span style="color: #008080;">26</span> <span style="color: #ff0000;">        -o-transform      </span>:<span style="color: #0000ff;">rotate(45deg)</span>;
<span style="color: #008080;">27</span> <span style="color: #ff0000;">        transform         </span>:<span style="color: #0000ff;">rotate(45deg)</span>;
<span style="color: #008080;">28</span>     }
ログイン後にコピー
矢印付きプロンプトボックスの概要例

html: 

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="info"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>提示信息<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>
ログイン後にコピー

3. 特殊文字「♦」

'♦' は単語に相当する特殊文字であるため、最初の画像の効果を実現するために font-size を通じてサイズが設定されます。

CSS:

矢印付きプロンプトボックスの概要例
<span style="color: #008080;"> 1</span> <span style="color: #800000;">.info </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">        margin-top</span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">        position</span>:<span style="color: #0000ff;">relative</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;">50px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">        line-height</span>:<span style="color: #0000ff;">60px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">        background</span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">        box-shadow</span>:<span style="color: #0000ff;">1px 2px 3px #E9D985</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;">1px solid #DACE7C</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">        border-radius</span>:<span style="color: #0000ff;">4px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">        text-align</span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">        color</span>:<span style="color: #0000ff;">red</span>;
<span style="color: #008080;">13</span>     }
<span style="color: #008080;">14</span> <span style="color: #800000;">    .nav </span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">        position</span>:<span style="color: #0000ff;">absolute</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">        left</span>:<span style="color: #0000ff;">30px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">        overflow</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;">24px</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;">24px</span>;
<span style="color: #008080;">20</span> <span style="color: #ff0000;">        font</span>:<span style="color: #0000ff;">normal 24px "微软雅黑"</span>;
<span style="color: #008080;">21</span>     }
<span style="color: #008080;">22</span> <span style="color: #800000;">    .nav-border </span>{
<span style="color: #008080;">23</span> <span style="color: #ff0000;">        top</span>:<span style="color: #0000ff;">-17px</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;">        color</span>:<span style="color: #0000ff;">#DACE7C</span>;
<span style="color: #008080;">25</span>     }
<span style="color: #008080;">26</span> <span style="color: #800000;">    .nav-background </span>{
<span style="color: #008080;">27</span> <span style="color: #ff0000;">        top</span>:<span style="color: #0000ff;">-16px</span>;
<span style="color: #008080;">28</span> <span style="color: #ff0000;">        color</span>:<span style="color: #0000ff;">#F6F1B3</span>;
<span style="color: #008080;">29</span>     }
ログイン後にコピー
矢印付きプロンプトボックスの概要例

html: 

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="info"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>提示信息<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav nav-border"</span><span style="color: #0000ff;">></span>♦<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="nav nav-background"</span><span style="color: #0000ff;">></span>♦<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>
ログイン後にコピー

以下は IE5.5 以降、Chrome、Firefox、およびその他のブラウザと互換性のあるデモです。便利な場合は、独自のプロジェクトで直接使用できます。

矢印付きプロンプトボックスの概要例
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>  <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>  <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html;charset=utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>  <span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span> <span style="background-color: #f5f5f5; color: #800000;">  div.container</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #ff0000;">        position         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #ff0000;">        top              </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #ff0000;">        left             </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">11</span> <span style="background-color: #f5f5f5; color: #ff0000;">        font-size        </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 9pt</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">12</span> <span style="background-color: #f5f5f5; color: #ff0000;">        display          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">block</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">13</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height           </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">14</span> <span style="background-color: #f5f5f5; color: #ff0000;">        width            </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">15</span> <span style="background-color: #f5f5f5; color: #ff0000;">        background-color </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">16</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">17</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span> 
<span style="color: #008080;">18</span> <span style="background-color: #f5f5f5; color: #800000;">    s</span><span style="background-color: #f5f5f5; color: #000000;">{</span> 
<span style="color: #008080;">19</span> <span style="background-color: #f5f5f5; color: #ff0000;">        position     </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">20</span> <span style="background-color: #f5f5f5; color: #ff0000;">        top          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">21</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *top         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-22px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">22</span> <span style="background-color: #f5f5f5; color: #ff0000;">        left         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">23</span> <span style="background-color: #f5f5f5; color: #ff0000;">        display      </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">block</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">24</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height       </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">25</span> <span style="background-color: #f5f5f5; color: #ff0000;">        width        </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">26</span> <span style="background-color: #f5f5f5; color: #ff0000;">        font-size    </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span>  
<span style="color: #008080;">27</span> <span style="background-color: #f5f5f5; color: #ff0000;">        line-height  </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">28</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-color </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">transparent transparent #666 transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">29</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-style </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">dashed dashed solid dashed</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">30</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-width </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">31</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span> 
<span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #800000;">    i</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;">33</span> <span style="background-color: #f5f5f5; color: #ff0000;">        position     </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">34</span> <span style="background-color: #f5f5f5; color: #ff0000;">        top          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-9px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">35</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *top         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-9px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">36</span> <span style="background-color: #f5f5f5; color: #ff0000;">        left         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">37</span> <span style="background-color: #f5f5f5; color: #ff0000;">        display      </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">block</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">38</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height       </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">39</span> <span style="background-color: #f5f5f5; color: #ff0000;">        width        </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">40</span> <span style="background-color: #f5f5f5; color: #ff0000;">        font-size    </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">41</span> <span style="background-color: #f5f5f5; color: #ff0000;">        line-height  </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">42</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-color </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">transparent transparent #fff transparent</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">43</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-style </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">dashed dashed solid dashed</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">44</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border-width </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">45</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span> 
<span style="color: #008080;">46</span> <span style="background-color: #f5f5f5; color: #800000;">    .content</span><span style="background-color: #f5f5f5; color: #000000;">{</span> 
<span style="color: #008080;">47</span> <span style="background-color: #f5f5f5; color: #ff0000;">        border                </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">48</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -moz-border-radius    </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">3px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">49</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -webkit-border-radius </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">3px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">50</span> <span style="background-color: #f5f5f5; color: #ff0000;">        position              </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">51</span> <span style="background-color: #f5f5f5; color: #ff0000;">        background-color      </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">#fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">52</span> <span style="background-color: #f5f5f5; color: #ff0000;">        width                 </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">53</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height                </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">54</span> <span style="background-color: #f5f5f5; color: #ff0000;">        padding               </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">5px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">55</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *top                  </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-2px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">56</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border-top           </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">57</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border-top           </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">58</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border-left          </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">none</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">59</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *border-right         </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">none</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">60</span> <span style="background-color: #f5f5f5; color: #ff0000;">        *height               </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">102px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">61</span> <span style="background-color: #f5f5f5; color: #ff0000;">        box-shadow            </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px 3px 4px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">62</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -moz-box-shadow       </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px 3px 4px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">63</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -webkit-box-shadow    </span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px 3px 4px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">64</span>         <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> For IE 5.5 - 7 </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;">65</span> <span style="background-color: #f5f5f5; color: #ff0000;">        filter</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')</span><span style="background-color: #f5f5f5; color: #000000;">;</span> 
<span style="color: #008080;">66</span>         <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> For IE 8 </span><span style="background-color: #f5f5f5; color: #008000;">*/</span> 
<span style="color: #008080;">67</span> <span style="background-color: #f5f5f5; color: #ff0000;">        -ms-filter</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"</span><span style="background-color: #f5f5f5; color: #000000;">;</span>  
<span style="color: #008080;">68</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">69</span>  <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">70</span> <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">71</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">72</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">73</span>         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">74</span> <span style="color: #000000;">            hello world!
</span><span style="color: #008080;">75</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">76</span>         <span style="color: #0000ff;"><span style="color: #800000;">s</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">77</span>             <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">78</span>         <span style="color: #0000ff;"></span><span style="color: #800000;">s</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">79</span>  <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">80</span> <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">81</span> <span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span>
ログイン後にコピー
矢印付きプロンプトボックスの概要例

レンダリング:

概要:

矢印付きのプロンプト ボックスは、ユーザー インタラクションに良い効果をもたらします。他の方法がある場合は、この記事で紹介します。この記事があなたのお役に立てば幸いです。

関連ラベル：
带箭头提示框总结实例
ソース：php.cn
前の記事：新たなスタート、新たな方向性 次の記事：HTML は角丸四角形を実装します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1986
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2148
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1814
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1706
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1721
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート