欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用CSS偽元素創(chuàng)建帶三角形的提示框的實現(xiàn)方法

  發(fā)布時間：2016-08-01 11:11:45   作者：佚名   我要評論
下面小編就為大家?guī)硪黄肅SS偽元素創(chuàng)建帶三角形的提示框的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

CSS偽元素非常有用，它提供了一種無需多余的DOM元素來實現(xiàn)一些常見的功能的方法，以下利用其實現(xiàn)一個帶三角形的tooltip。

下面是DOM結構：
下面是對應的CSS樣式：

XML/HTML Code復制內容到剪貼板
  1. <div class="tooltip-wrapper bottom">    
  2.     <div class="arrow"></div>    
  3.     <div class="content">    
  4.         This is content    
  5.     </div>    
  6. </div>   

CSS Code復制內容到剪貼板
  1. .tooltip-wrapper {    
  2.     position: absolute;    
  3.     z-index: 9999;    
  4.     padding: 5px;    
  5.     background: white;    
  6.     border: 1px solid #7d7d7d;    
  7.     border-radius: 5px;    
  8. }    
  9. .tooltip-wrapper .arrow,    
  10. .tooltip-wrapper .arrow:after {    
  11.     position: absolute;    
  12.     display: block;    
  13.     width: 0;    
  14.     height: 0;    
  15.     border-color: transparent;    
  16.     border-style: solid;    
  17. }    
  18. .tooltip-wrapper .arrow {    
  19.     border-width: 11px;    
  20. }    
  21. .tooltip-wrapper .arrow:after {    
  22.     content: "";    
  23.     border-width: 10px;    
  24. }    
  25. .tooltip-wrapper.bottombottom .arrow {    
  26.     top: -11px;    
  27.     left: 50%;    
  28.     margin-left: -11px;    
  29.     border-top-width: 0;    
  30.     border-bottom-color: #7d7d7d;    
  31. }    
  32. .tooltip-wrapper.bottombottom .arrow:after {    
  33.     top: 1px;    
  34.     margin-left: -10px;    
  35.     border-top-width: 0;    
  36.     border-bottom-color: white;    
  37. }  

以上這篇利用CSS偽元素創(chuàng)建帶三角形的提示框的實現(xiàn)方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/clumiere/p/4497588.html

相關文章

  • CSS :befor :after 偽元素的巧妙用法

    本篇重點介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場景，如填充文本、作為iconfont、進度線、時間線以及幾何圖形，感興趣的朋友一起看看吧
    2018-02-07

  • CSS3中偽元素::before和::after的用法示例

    before 和 after其實就是附著在元素前后的偽元素，說他是偽元素的意思就是，元素不是在DOM中生成的，而是在瀏覽器渲染引擎渲染CSS的時候畫上去的，這篇文章主要給大家介紹
    2017-09-18

  • 利用CSS3偽元素實現(xiàn)逐漸發(fā)光的方格邊框

    這篇文章主要給大家介紹了利用CSS3偽元素實現(xiàn)逐漸發(fā)光的方格邊框的相關資料，文中給出了詳細的示例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來
    2017-05-07

  • css3+偽元素實現(xiàn)鼠標移入時下劃線向兩邊展開的效果

    這篇文章主要介紹了利用css3+偽元素實現(xiàn)鼠標移入時下劃線向兩邊展開效果的相關資料，文中先進行了詳細的介紹，方便大家理解，而后給出了完整的實例代碼讓大家可以參考學習
    2017-04-25

  • 那些你所不知的CSS ::before 和::after 偽元素用法

    下面小編就為大家?guī)硪黄切┠闼恢腃SS ::before 和::after 偽元素用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-12

  • 詳解CSS 偽元素及Content 屬性

    本文講講述偽元素以及功能強大的Contet屬性，文章通過實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-09-18

最新評論